loading a multipage file in jquery mobile

Question

I have two separate html file that are being loaded via ajax using jquery/jquery mobile framework. But when I load the second file, it only loads the first div the the role of page. Any way to work around this?

Answer 1

It is by design. When linking a multipage document use rel="external" or data-ajax="false"

It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.

<a href="multipage.html" rel="external">Multi-page link</a>

If changing pages programmatically use

$.mobile.ajaxEnabled = false;
$.mobile.changePage("multipage.html");