Question

I have a basic jQuery Mobile page like so:

<div data-role="page" id="home">

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

</div>

All works as expected unless I want to link to the products page from an external link. I’ve tried:
mysite.com/mobile/default.aspx#products but that only displays the home page. Is there a way for an external link to make the products page to show?

Answer 1

The short answer is that you cannot directly link to a specific page within a multipage document.

Unfortunately the way jQuery Mobile works is that when you link to a page with multiple “pages” it will by default only load the first page, to load the entire external multipage doc you need to either load the page without ajax (for example adding rel="external", or if you want to load the page with ajax you can use the subpages plugin.

As far as linking goes you should either separate your pages, or preload the external multipage document via ajax (using the plugin I linked to above, or manually if you are so inclined) and then link to it as an internal page.

From the Documentation

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.

For example, a link to a page containing multiple internal pages would look like this:

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