CODEWITHSUNDEEP
jquery-mobile
Norbert Hartl
Norbert Hartl

Reputation: 10841

Cannot close slide panel in jquery mobile before page change

I'm using jquery mobile 1.3.1 for my current app. In there I use a page skeleton like the following

 <div id="map-page" data-role="page" data-navigation="true">
    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-id="header"> <a href="#map-page-panel" data-role="button" data-iconpos="notext" data-inline="false" data-icon="bars"></a>

         <h1 class="ui-title" role="heading">Karte</h1>
 <a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-rel="external" data-icon="refresh" onClick="cab.refreshLocationMarkers()">refresh</a>

    </div>
    <div id="map_content" data-role="content" style="padding: 0px; margin: 0px">
        <div id="map_canvas"></div>
    </div>
    <div data-role="panel" id="map-page-panel" data-position-fixed="true" data-theme="a" data-display="reveal">
        <ul data-role="listview" data-theme="a" class="nav-search">
            <li data-icon="false"> <a href="#map-page">
                   <img class="ui-li-thumb" src="/image/sidebar/[email protected]"/>
                   CallBikes finden
                </a>

            </li>...</ul>
    </div>
</div>

This works so far. The panel does a reveal animation when opening. What I'm trying to achieve is to make the panel close itself (having the inverse reveal animation) before a page change is issued. For that I do

$(document).on("pagebeforehide", function(e,data) {
   $(e.target).find('div[data-role="panel"]').panel("close");
});

But this breaks it somehow. I can see the above page. But navigating away from it and back to it again breaks the navbar button. The button is unresponsive and looks like it is in down state. The panel does not open and I need to reload the page in order to be able to control it again.

Upvotes: 0

Views: 1689

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Why don't you change your code. Instead doing 2 parallel actions like closing a panel and switching a page in a same time why don't you trigger a panel close and wait for a callback function when panel is closed. Then you can trigger pageChange function.

Basically when you click to change page trigger panel close instead. When panel is closed it will trigger this callback function:

$( ".selector" ).on( "panelclose", function( event, ui ) {

});

Read more about in panel official API documentation here.

Now you should change your page inside this callback. This will give you much better stability and user will be able to see proper closing animation before page transition occurs.

Upvotes: 2

Related Questions