I have a problem in my webapp :
When i open a “multipage template” page in my browser, I can see both pages in the DOM, but only one is active, this is logical, nothing to say about that.
But when I load a “multipage template” page from a previous page, using ajax transitions, I can see the previous page in the DOM (also logical : to avoid loading this page again if the user wants to go back) but only one of the pages that are in my “multipage template” page is loaded (the first).
I thought I made a mistake during all my process in javascript : I automatically delete non-active-pages after loading to avoid ID conflicts, but I wrote a particular case for this page, by not using my auto-page-deletion-function. And it perfectly works when I open the “multipage template” in my browser (both pages are in the DOM, my “particular case” code works)
So i went to the documentation page :
http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html
I scrolled down to the part : “Multi-page template structure”
right click on the button “View multi-page template” > inspect element
We can see the code :
<a href="../../docs/pages/multipage-template.html"
data-inline="true"
data-theme="b"
data-role="button"
rel="external"
class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow vt-p ui-btn-up-b">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">View multi-page template</span></span>
</a>
so, the rel=”external” code means that this page won’t be loaded using ajax transition, and when you click on this button, the multipage template works perfectly (but it’s not loaded via ajax …)
going back to the button code, I dynamically deleted the attribute rel=”external” from the DOM, so the page will be loaded in ajax. I clicked on the button, the multipage loaded well, but it was impossible to reach the page “#two”. And after a quick look at the DOM : the page of id=”two” was not there, not loaded by the framework.
So it’s probably a normal behaviour, but is there a way to load ALL the inner pages of a multipage template when using ajax transition ?
(sorry for my bad english, I hope it’s still understandable)
This is the normal behavior, but there is a workaround. Check out Todd Thomson’s jQuery-Mobile-Subpage-Widget.