jQuery Mobile - Panel Issue - Not opening on second click

Question

I have a working left panel in my App that I have began to build, however when I try and go back to my main screen the panel no longer works. To see this bug, use the following method:

1) Click on 'Bars' Icon top left and go to Google Maps

2) Once on the blank page, use the panel to go back to Home page.

3) Try and open panel once more.

JSFiddle Link

Any ideas?

<!DOCTYPE HTML>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <!-- <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css"> -->
    <!-- <script src="jquery-2.0.3.min.js"></script> -->
    <!-- <script src="jquery.mobile-1.4.0.min.js"></script> -->
</head>

<body>
    <!-- Main Page -->
    <div data-role="page" id="home">
        <!-- Left-Panel -->
        <div data-role="panel" id="left-panel" data-display="overlay">  <a href="#home" class="ui-btn ui-corner-all ui-mini">Home</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">About Us</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">News</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Key Dates</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Calendar</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Contact</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Links</a>
<a href="#two" class="ui-btn ui-corner-all ui-mini">Google Map</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Videos</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Gallery</a>

        </div>
        <!-- Header -->
        <div data-role="header" data-position="fixed" data-theme="a">
            <!-- Header -->
                <h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars"></a>

        </div>
        <!-- Content -->
        <div role="main" class="ui-content">
            <div>
                <img src="" id="picture">
            </div>
        </div>
        <!-- Footer -->
        <div data-role="footer" data-position="fixed" data-theme="a">
                <h4>Footer</h4>

        </div>
    </div>
    <!-- Maps Page -->
    <!-- Start of second page -->
    <div data-role="page" id="two">
        <!-- Left-Panel -->
        <div data-role="panel" id="left-panel" data-display="overlay">  <a href="#home" class="ui-btn ui-corner-all ui-mini">Home</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">About Us</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">News</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Key Dates</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Calendar</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Contact</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Links</a>
<a href="#two" class="ui-btn ui-corner-all ui-mini">Google Map</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Videos</a>
<a href="#" class="ui-btn ui-corner-all ui-mini">Gallery</a>

        </div>
        <!-- Header -->
        <div data-role="header" data-position="fixed" data-theme="a">
            <!-- Header -->
                <h1>Header</h1>
<a href="#left-panel" data-iconpos="notext" data-icon="bars">
    </div>

<div role="main" class="ui-content">

</div><!-- /content -->

<!-- Footer -->
    <div data-role="footer" data-position="fixed" data-theme="a">
        <h4>Footer</h4>
    </div>

Answer 1

Fixed, here is the fiddle: http://jsfiddle.net/tHDWJ/1/

Problem was that you were referencing the same panel in both pages and when you navigate the current page hides the previous panel.

Note the difference in the following lines:

<div data-role="panel" id="left-panel1" data-display="overlay">    
<div data-role="panel" id="left-panel2" data-display="overlay">
<a href="#left-panel1" data-iconpos="notext" data-icon="bars"></a>
<a href="#left-panel2" data-iconpos="notext" data-icon="bars"></a>

jQuery Mobile - Panel Issue - Not opening on second click

Question

1 answers

solution1
4 ACCPTED 2014-01-15 08:32:46

jQuery Mobile - Panel Issue - Not opening on second click

Question

1 answers

solution1 4 ACCPTED 2014-01-15 08:32:46

solution1
4 ACCPTED 2014-01-15 08:32:46