Search jQuery

jQuery Forum

Swipe and Panel on the same Page just don't work

in jQuery Mobile • 4 years ago

I have just overhauled my mobile page from 1.3 to 1.4.5 as there were problems in swipes. On the new platform I cannot get the swipe gestures to work with a panel on the same page, for my application the panel just doesn't appear when the ICON is clicked on the first page loaded. I have used the swipe demo as my foundation and this seems to work OK. I found that removing the line in red below from the supplied JS fixed the problem, however when I swipe forward say two pages and then swipe back one page the ICON no longer fires the panel.

// Prefetch the next page
// We added data-dom-cache="true" to the page so it won't be deleted
// so there is no need to prefetch it
if ( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
}

In desperation I have cloned the Swipe demo page and this works fine. Then I added a simple panel (from the demo code) and an ICON in the header to fire it. Now the page is completely broken and will not even load the first image of New York, swiping through and the other images blink and go and the PANEL is just blank. It seems that there is a fundamental problem of using these two on the same page unless I have missed something seriously basic...

I have put a very basic setup here

https://jsfiddle.net/nathanadams/6vmkduue/20/

If you remove the panel the image appears,sadly I do not know how to put this up on jsfiddle with multiple pages but here is the link to the same demo on my site

http://ebookingonline.net/1.4.5/swipe-page/newyork.html

The right hand side icon of a user should open the panel...... thanks for your help......

Replies(7)

jakecigar

Re: Swipe and Panel on the same Page just don't work

4 years ago

Your fiddle doesn't do much. We've found that http://plnkr.co/ does a much better job with multiple HTML JQM demos.

On your site, the banners go away because you have moved them into the "page". You can't do that, and expect them to work on the other "pages".

I took my turn at making sense of the swipe demo. It uses dynamically generated pages and has functional fixed headers.

http://home.jejaju.com/jqm-slides/older%20stuff/Fixed%20Headers.html

JΛ̊KE

nathanada..

Re: Re: Swipe and Panel on the same Page just don't work

4 years ago

Jake thanks for taking the time. I have been working on this all day and made a little more progress, The swipe demo was a red herring as there was an issue with the CSS for the ui-panel-inner class that had a z-index of 999 and was wiping out the image of the DIV behind it in the demo. Please ignore the jsfiddle.

In the meanwhile I realised that as each page loaded the next page into the DOM it creates duplicate ID's of the panel (#left-panel). So I think the best approach for this is to use EXTERNAL PANELS but although I can get this to work on the first page all other pages do not work on opening the panel, even though the markup looks good and I can see elements changing? Documentation on external panels for 1.4.5 is non-=existent this is all I have found which I have put into all markup:

<script id="panel-init">
$(function() {
$( "body [data-role='panel']" ).panel();
});
</script>

Bottom line is I cannot get external panels to work, sure its just me.... here is a real cut down basic version on three pages transitioning with an external men. The menu should open using the 'bars' icon but only opens on the first page. Thanks in advance.

http://ebookingonline.net/mobile2/test1.html

jakecigar

Re: Swipe and Panel on the same Page just don't work

4 years ago

I never got external panels to work. I've always used regular panels. You can play games with cloning the "external" panel and copying it to the "page".

I've done most of my JQM multiple page sites without using ANY ids. It's a bit harder, but it really has to be done if you are keeping the pages in the DOM.

JΛ̊KE

watusiware

Re: Swipe and Panel on the same Page just don't work

4 years ago

External panels need to be external. Yours is inside your first page!

It needs to go OUTSIDE of any page.

Unfortunately, that means that you need to duplicate it in every document, because otherwise it would fail if the user bookmarks the page and comes back, refreshes the browser, etc.

When loading a page with Ajax, JQM loads the first page found, and ignores everything else. So, in normal navigation, the duplicate panel delivered with every document is a bit of wasteful bandwidth that is ignored.

You can avoid the duplication by having your server not send it for Ajax requests. (You can do the same for <head> content, as well.

As well, in hybrid mobile app environments - where there is no browser reload, no way to bookmark a page, etc. etc. you can just include <head> and external widgets on the first page only.

BTW, I wouldn't put all that JS code directly in <head>, because then you must duplicate it in every document. (At least for a web environment). Always link to CSS and JS files, and then the wasteful overhead is limited to just the tags with the link URLs, rather than all of the JS itself.

If you use a multi-page document, then external panels and popups are a breeze. It's also a garden path you don't want to go down...

nathanada..

Re: Swipe and Panel on the same Page just don't work

4 years ago

Thanks for the replies, you have helped me get this working! I moved the panel on the first page outside of the data-role="page" section. This worked by CSS was lost. I just needed to add .ehanceWithin() to the panel function on each page.... just for completeness here is the working first page (I know the JS should be in a JS file, this is just for testing, thanks soooo much.....

First Page

<body>
<div data-role="page" data-dom-cache="true" id="test1" class="box3-page" data-next="test2.html">
<div data-role="header" data-position="fixed">
<h1>TEST PAGE 1</h1>
<a href="#left-panel" data-theme="b" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
<ul data-role="listview" data-theme="b">
<li data-role="list-divider" style="padding:0 5px">
<div>
<div style="float:left"><a href="#" class="prev ui-btn ui-icon-arrow-l ui-btn-icon-notext ui-corner-all">No text</a></div>
<div style="float:right"><a href="#" class="next ui-btn ui-icon-arrow-r ui-btn-icon-notext ui-corner-all">No text</a></div>
<div style="text-align:center;padding-top:10px">Click left and Right to Transition</div>
<div style="clear:both;"></div>
</div>
</li>
</ul>
</div>
<div data-role="content">
<h1>Test One Content</h1>
</div>
</div>
<div data-role="panel" id="left-panel" data-theme="a" data-display="overlay">
<ul data-role="listview" data-theme="a">
<li data-icon="delete" data-mini="true"><a href="#" data-rel="close" >Close</a></li>
<li data-role="list-divider" data-mini="true">Sport</li>
<li data-role="list-divider" data-mini="true">Manage</li>
<li data-icon="arrow-r" data-mini="true"><a data-ajax="false" href="#">Bookings</a></li>
<li data-icon="arrow-r" data-mini="true"><a data-ajax="false" href="#">Main Site</a></li>
<li data-icon="info" data-mini="true"><a data-ajax="false" href="#">Logout</a></li>
</ul>
</div>
</body>

Second page

<body>
<div data-role="page" data-dom-cache="true" id="test2" class="box3-page" data-next="test3.html" data-prev="test1.html">
<div data-role="header" data-position="fixed">
<h1>TEST PAGE 2</h1>
<a href="#left-panel" data-theme="b" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
<ul data-role="listview" data-theme="b">
<li data-role="list-divider" style="padding:0 5px">
<div>
<div style="float:left"><a href="#" class="prev ui-btn ui-icon-arrow-l ui-btn-icon-notext ui-corner-all">No text</a></div>
<div style="float:right"><a href="#" class="next ui-btn ui-icon-arrow-r ui-btn-icon-notext ui-corner-all">No text</a></div>
<div style="text-align:center;padding-top:10px">Click left and Right to Transition</div>
<div style="clear:both;"></div>
</div>
</li>
</ul>
</div>
<div data-role="content">
<h1>Test Two Content</h1>
</div>
</div>
</body>

<script id="panel-init">
$(function() {
$( "body > [data-role='panel']" ).panel().enhanceWithin();
});
</script>

watusiware

Re: Swipe and Panel on the same Page just don't work

4 years ago

I moved the panel on the first page outside of the data-role="page" section. This worked by CSS was lost. I just needed to add .ehanceWithin() to the panel function on each page

Oh, yes, you have to enhance it yourself, because it is not inside of a page.

I think your current solution will fail when the user reloads the browser on any but the first page. You will need to duplicate it in every document to avoid that.

Scripts and styles inside of <head> , as well as external widgets inside of <body> but outside of <div data-role='page'> need to be duplicated and identical in every document.

nathanada..

Re: Swipe and Panel on the same Page just don't work

4 years ago

Thanks once again, I am happy coding again. My pages are all dynamic (PHP) so they will have the same headers. I have taken on your point about reload though. In my application the panel is also dynamic so I will load this via ajax and check if it exists. I have tried this and it works nicely on all pages....even after reloads....

if ($('#left-panel').length == 0) {
$.ajax({ url: "./panel.html"}).done(function(data) {
$(".box3-page").after(data);
$('#left-panel').panel().enhanceWithin();
});
}

Top Reply

Response title

Attachments

jQuery Forum

Swipe and Panel on the same Page just don't work

Replies(7)

Re: Swipe and Panel on the same Page just don't work

Re: Re: Swipe and Panel on the same Page just don't work

Re: Swipe and Panel on the same Page just don't work

Re: Swipe and Panel on the same Page just don't work

Re: Swipe and Panel on the same Page just don't work

Re: Swipe and Panel on the same Page just don't work

Re: Swipe and Panel on the same Page just don't work

Statistics

Tags

Actions