How to link to jquery mobile subpage from external page?

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>

Answer 2

for each 'page' add a data-url attribute with the same name as you give the id:

<div data-role  = 'page'                         
     id         = 'page_baseball_hats'  
     data-url   = 'page_baseball_hats'    
  >                                             

then you should be able to direct link from outside the site into a 'subpage' using the url hash system that jqm already generates, such as: www.myjqmsite.com/#page_baseball_hats

The second paragraph introduces this idea: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-navmodel.html