CODEWITHSUNDEEP
javascripthtmljquery-mobilemobile
maz
maz

Reputation: 2476

Jquery mobile panel stops working after navigation between pages in multi page template

In a multi page template setup in a jquery mobile application after leaving the first page via panel navigation. When returning to the first page via another form of navigation the panel looks "hanged".

Looking closely you can see a small shadow to the left which is the hidden panel. The button to show the panel does no longer work.

Here is a demo that replicates the problem.

<!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 to replicate are simple:

  1. Open panel and click "Two"
  2. Click "One"
  3. Panel is now broken.

Does anyone know what might be causing this?

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

Upvotes: 4

Views: 2638

Answers (1)

Omar
Omar

Reputation: 31732

jQuery Mobile is based on Ajax Navigation for switching between pages and loading new pages. When you link a page with data-ajax="false" you disable Ajax Navigation and jump/skip to that div as an internal div within the page.

To link between pages in jQuery Mobile, Ajax Navigation should be enabled.

<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>

It is possible to use this in jQM but not for changing pages in Multi-page model. Also, use data-ajax="false" when you want to load page normally via HTTP not Ajax, and when you want to submit forms.

Demo

Upvotes: 3

Related Questions