jQuery Mobile Panel Not Working Well

Question

I created multiple div swipe in a single page so that the page remains same but the div gets changed. Used the help of jquery mobile page swipe and did some customizations. The div swipe is working completely fine but I have created a panel and whenever I go from first div to second div and get back to first div again, the panel doesn't work. Please help me with the panel. Here is my code:-

<!DOCTYPE html> 
<html>
<head>
    <title>Index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="jquery/jquery.min.js"></script>
    <script src="js/swipe-page.js"></script>
    <script src="jquery/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
        <div id="header" data-role="header" data-id="header" data-position="fixed" data-tap-toggle="false">
            <h1>Swipe left or right</h1>
            <a href="#mypanel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
            <!-- <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="grid" class="ui-btn-active">News</a></li>
                    <li><a href="market.html" data-icon="star">Market</a></li>
                    <li><a href="#" data-icon="gear">Announcement</a></li>
                    <li><a href="#" data-icon="comment">Portfolio</a></li>
                </ul>
            </div> --><!-- /navbar -->
        </div><!-- /header -->

        <div data-role="page" id="index" class="demo-page" data-title="Index" data-dom-cache="true" data-theme="a" data-next="market">
            <div role="main" class="ui-content">
                <h1>Div 1</h1>
            </div><!-- /content -->
            <div data-role="panel" id="mypanel" data-theme="a" data-display="overlay" data-position="left" >
                <ul data-role="listview">
                    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#panel-fixed-page2">Accordion</a></li>
                    <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
                    <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                    <li><a href="#panel-fixed-page2">Buttons</a></li>
                    <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                    <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                    <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                </ul>
            </div><!-- /panel -->
        </div><!-- /page -->

        <div  data-role="page" id="market" class="demo-page" data-title="Market" data-dom-cache="true" data-theme="a" data-prev="index">
            <div role="main" class="ui-content">
                <h1>Div 2</h1>
            </div><!-- /content -->
            <div data-role="panel" id="mypanel" data-theme="a" data-display="overlay" data-position="left">
                <ul data-role="listview">
                    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#panel-fixed-page2">Accordion</a></li>
                    <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
                    <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                    <li><a href="#panel-fixed-page2">Buttons</a></li>
                    <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                    <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                    <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                </ul>
            </div><!-- /panel -->
        </div><!-- /page -->

        <div id="footer" data-id="footer" data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar">
                <ul>
                    <li><a href="#">Latest News</a></li>
                    <li><a href="#">Featured News</a></li>
                    <li><a href="#">Most Read</a></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
</body>
</html>

The javascript for div swipe used is:-

$(document).on('pageinit', function(event){
    $('div.ui-page').on("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, "slide", false, true);
        }
    });

    $('div.ui-page').on("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
          $.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
        }
    });
});

Omar · Accepted Answer · 2014-12-08T18:12:46.280

You're using the same ID for both panels, which is wrong. Give each panel a different ID or use an external panel like toolbars (header/footer).

Place panel div outside page div and then initialize it manually.

<!-- panel -->
<div data-role="panel" id="mypanel" data-theme="a" data-display="overlay" data-position="left">
  <ul data-role="listview">
     <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
     <li><a href="#panel-fixed-page2">Accordion</a></li>
     <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
     <li><a href="#panel-fixed-page2">Autocomplete</a></li>
     <li><a href="#panel-fixed-page2">Buttons</a></li>
     <li><a href="#panel-fixed-page2">Checkboxes</a></li>
     <li><a href="#panel-fixed-page2">Collapsibles</a></li>
     <li><a href="#panel-fixed-page2">Controlgroup</a></li>
  </ul>
</div><!-- /panel -->

<!-- pages -->
<div data-role="page" id="page1">
</div>

<div data-role="page" id="page1">
</div>

Initialize external panel

$(function () {
  $("#mypanel").panel().enhanceWithin();
});

.enhanceWithin() is used to initialize widgets inside panel.

Regarding your swipe code, it needs to adjusted. You're multiplying swipe listeners on each pageinit. i.e. if you have five pages, on fifth page, swipe will fire five times.

Note that both pageinit and $.mobile.changePage are deprecated as of jQM 1.4, their replacements are pagecreate and $.mobile.pageContainer.pagecontainer("change", target) respectively.

$(document).on('pagecreate', function (event) {
    var currentPage = $(event.target);

    currentPage.on("swipeleft", function () {
        var nextpage = currentPage.next('[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.pageContainer.pagecontainer("change", nextpage, { /* options */ });
        }
    });

    currentPage.on("swiperight", function () {
        var prevpage = currentPage.prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.pageContainer.pagecontainer("change", prevpage, { /* options */ });
        }
    });
});

Demo

jQuery Mobile Panel Not Working Well

1 Answers1