Geek Answers Handbook

JQuery panel stops working after navigating between pages in a multi-page template

In setting up a multi-page template in jquery mobile app after exiting the first page using the navigation bar. When you return to the first page using another form of navigation, the panel looks “hung”.

Looking into the eyes, you see a small shadow on the left, which is a hidden panel. The button that displays the panel no longer works.

Here is a demo that replicates the issue.

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>Panel Issue Demo</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-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>

    <div data-role="page" id="one">
        <div data-role="header" data-position="fixed">
            <h1>One</h1>
            <a href="#one-menu" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
        </div>

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

        <div data-role="panel" data-position="left" data-display="overlay" data-theme="a" id="one-menu">
            <ul class="ui-listview ui-alt-icon ui-nodisc-icon" data-role="listview">
                <li><a href="#two" data-ajax="false">Two</a></li>
             </ul>
        </div>
    </div>

    <div data-role="page" id="two">
        <div data-role="header" data-position="fixed">
            <h1>Two</h1>
        </div>

        <div role="main" class="ui-content">
            <a href="#one" data-ajax="false">One</a>
        </div>
    </div>
</body>

The steps for replication are simple:

  • Open the panel and click "Two."
  • Click "One"
  • The panel is now locked.

Does anyone know what could be causing this?

Fiddle: http://jsfiddle.net/jVzNk/

+4
1

jQuery Mobile Ajax Navigation . data-ajax="false", Ajax Navigation / div div .

jQuery Mobile, Ajax Navigation .

<div data-role="page">
  <a href="#step3" data-ajax="false">Step 3</a>

  <div id="step1">
    <!-- content -->
  </div>

  <div id="step2">
    <!-- content -->
  </div>

  <div id="step3">
    <!-- You jump to this div -->
  </div>
</div>

jQM, . , data-ajax="false", HTTP, Ajax, .

+3

More articles:


All Articles