Geek Answers Handbook

How to link jquery subpage link from external page?

I have a jQuery Mobile base page, for example:

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

Everything works as expected, if I do not want to link to the product page via an external link. I tried: mysite.com/mobile/default.aspx#products, but only displays the home page. Is there a way for an external link to display a product page?

+4
source share
3 answers

The short answer is that you cannot directly link to a specific page in a multi-page document.

Unfortunately, how jQuery Mobile works, when you link to a page with several "pages", by default it only loads the first page to load the entire external multi-page document, you need to either load the page without ajax (for example, adding rel="external" , or if you want to load a page using ajax, you can use the subpages plugin .

As for links, you should either split your pages or preload an external multi-page document using ajax (using the plugin connected to it linked above, or manually if you are so inclined), and then link to it as an internal page.

From the documentation

It is important to note that if you are linking to a mobile page that has been downloaded via Ajax to a page containing several internal pages, you need to add rel = "external" or data-ajax = "false" to the link. This suggests that the structure is performing a complete reload of the page to clear the Ajax hash in the URL. This is important because Ajax pages use a hash (#) to track Ajax history, and several internal pages use a hash to indicate internal pages, so there will be conflicts between the two modes in the hash.

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

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

for each "page" add an attribute of url data with the same name as the identifier:

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

then you should be able to direct the link from outside the site to the "subpage" using the url hash system that jqm already creates, for example: www.myjqmsite.com/#page_baseball_hats

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

+1
source

This is out of the box. But it works well.

  $(document).on('pagebeforeshow', '#mainPage', function (e) { if(window.location.hash) { $('#YOUR BTN ID LINKED TO DESIRED SUBPAGE').click(); } });

This means that "if your url has hash (index.html # subPage), and if you have a hyperlink button to this page with an identifier (set this identifier to $ click) (you can have this button in for example your navigator in the footer), go to this subpage until the "

Change #mainPage to the id of the first page in your multi-page URL.

Change #subPage to the subpage id in your multi-page url.

Of course, this will only work if you have only one subpage.

If you have multiple subpages, use this

  $(document).on('pagebeforeshow', '#mainPage', function (e) { var hash = location.hash.replace("#",""); if(window.location.hash) { if(hash === 'subPage'){ $('#YOUR BTN ID LINKED TO DESIRED SUBPAGE').click(); } } });
0
source

More articles:


All Articles