javascript - jqm panel stops opening after refresh to the page (edited) -
i using jquery mobile 1.3.1 panels. have 2 panels (one on left, 1 on right) , open panels there buttons , @ same time swipe events. working fine if user doesn't refresh page. if user refreshes page can open panel @ page when clicks link on panel , routes page can't open panels more (swipe or button both of them doesn't work). if refresh page again again starts work 1 time. way using ajax transitions in jqm. couldn't find out why. missing in usage of panels. here html;
<div data-role="page"> <div data-role="panel" id="left-panel" class="panel" data-display="push" data-position="left" data-theme="a" class="ui-response"> <div data-role="fieldcontain"> <input type="search" name="password" id="search" value="" placeholder="search"/> </div> <a data-role="button" href="home">home</a> <a data-role="button" href="settings">settings</a> <button id="signoutbutton">sign out</button> </div><!--left panel--> <div data-role="panel" id="right-panel" class="panel" data-display="push" data-position="right" data-theme="a" class="ui-responsive"> </div><!--right panel--> <div data-role="header" data-tap-toggle="false"> <h1>header</h1> <button id="openleftpanel">open</button> <button id="openrightpanel">open</button> </div><!-- /header --> <div data-role="content" <p>this home</p> </div><!-- /content --> </div><!-- /page -->
and here js;
$(document).on('pageinit', function(){ //opening panels swipe, if open don't open panel (avoid closing swipe open other panel) //catch swipes $( document ).on( 'swipeleft swiperight', function( evt ) { if ( $.mobile.activepage.jqmdata( 'panel' ) !== 'open' ) { if ( evt.type === 'swipeleft' ) { $( '#right-panel').panel( 'open' ); } else if ( evt.type === 'swiperight' ) { $( '#left-panel').panel( 'open' ); } } }); $(document).on('click tap', function(evt){ $.mobile.hidepageloadingmsg(); var target = evt.target; var targetid = target.getattribute('id'); //sign out if(targetid === 'signoutbutton'){ window.authfunctions.deletecookie('apikey'); window.location.replace('/'); evt.stopimmediatepropagation(); evt.preventdefault(); } else if(targetid === 'openleftpanel'){ $('#left-panel').panel('open'); } else if(targetid === 'openrightpanel'){ $('#right-panel').panel('open'); } });
sorry if code looking not pretty thats because using laravel's blade create these pages on server side.
thanks in advance.
edit
when trying recognized that; when click on open panel button after starts not working, opens previous page's panel rather active page's panel. used previous page button on browser , saw controlling previous page's panel. how can solve issue?
$(document).on('pagehide', function(event, ui){ var page = $(event.target); page.remove(); });
this code solved problem removing page going hide.
Comments
Post a Comment