I am creating a mobile website using jQuery mobile (1.3).
In this site I'm using a panel for my menu, which get activated by the 'bars' button in the top left of the screen or by swiping from left to right (on desktops; click and move mouse to the right).
This all is working fine until I navigate to a different page. The new page loads using the jQuery mobile AJAX function, in the console.log my panel div is logged so I know it's there but the .panel('open') function is not triggered.
I tried making my links 2 different ways with no luck:
<a href="?controller=website&action=algemeenInvoer">Algemene invoer</a>
<a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a>
Since I use php I can't create a simple JSFiddle demonstrating the problem but here is a link to my dev page: snip
I hope someone can help me fix this problem and my .panel('open') is triggered after page navigation.
EDIT: Current swipe function:
$(document).on('pageinit',function(){
$('div[data-role="content"]').on("swiperight",function(){
console.log($('#menu'));
//open panel after swiped x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('#menu').panel("open");
});
});
All you need is the code inside
pageinit
, as the last fires once only.You need to change your page logic.
When new page is opened it is just another page loaded into the DOM. But when you try to open a panel inside a second page it will try to open a first page panel because they have the same.
I have tested this on your page and it is working:
Proof
index.html
second.html