Question

Is possible to use swipe in JQuery Mobile with the same page and different content?
I have a list of details and I would give the possibility to do swipe between list with transaction effect.
I would avoid to do a cut and paste of the same page with different name and navigate between them, like this:

<div data-role="page" id="page" class="custom-page">....</div>
<div data-role="page" id="page_next" class="custom-page">....</div>
<div data-role="page" id="page_previous" class="custom-page">....</div>

Is possible to use $.mobile.changePage and calling the same page with different parameters, for example the index of the list?
There are some alternatives?

Answer 1

I really don’t understand the problem of having repeated

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

elements, because that’s how JQM works and the page shell itself really isn’t that much of “extra baggage”.

To answer your questions:

Yes, you can call changePage on the same page multiple times with varying parameters. Just make sure you set allowSamePageTransitions to true globally or on the changePage call itself. JQM will re-request the page and add it to the DOM, so you will end up with the same page in there twice.

Of course you could also “swipe” contents, but not out of the box with JQM. Have a look at how JQM pagination or content loading on Github works.

To do this though, you’d need to set up a routine of when the content should be available (load dynamically vs on the page when it loads) where it should be positioned (since you want to swipe it needs to be left and right of your content being viewed) and what to do with the hash and browser history ( if you don’t change it on “contentSwipe” you will not be able to go browser-back ).

Bottom line:
This is a lot of fuss for trying to avoid re-using the JQM page shell and IMHO it’s not worth all the extra effort vs. just using three pages and JQM-out-of-the-box.

Still, I hope this gets you started in whichever direction.