CODEWITHSUNDEEP
jqueryjquery-mobile
Ian Vink
Ian Vink

Reputation: 68810

jQuery-Mobile: MultiPage template loads but is dead

I have a single page template page (page1.aspx) which loads a multi-page template page (page2.aspx)

The Multi-page template page has buttons which show internal pages as dialogs. When page1 loads page2 via the default AJAX behavior, the buttons on page2 do not work. Forcing a refresh of page2 in the browser lets the buttons on page2 work.

If I add data-ajax="false" to my links in page1, all is fine.

How do I have a multi-page template page load via AJAX so that buttons on it work?

Upvotes: 1

Views: 1579

Answers (1)

Jasper
Jasper

Reputation: 76003

You cannot link to a multi-page document via AJAX. Only the first data-role="page" element will be imported into the DOM and everything else will be ignored (even content in the <head>).

If you link to the multi-page template without AJAX then the whole page will load and all of the data-role="page" elements will be available. To do this you can set attributes on specific links like this:

<a hef="#" data-ajax="false">my link</a>

Or like this:

<a hef="#" rel="external">my link</a>

You can also set this option globally like this:

<script src="jquery.js"></script>
<script>
$(document).bind('mobileinit', function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="jquery-mobile.js"></script>

UPDATE

I have seen a plugin that allows you to do what you want, but I have not been able to find it. It just pulls all the data-role="page" elements in from the multi-page document rather than just the first one (it seems to me that this would create some strange deep-linking issues however).

UPDATE

Oh, and it's a good one :)

With version 1.0, jQuery Mobile will let you pre-fetch pages by adding the data-prefetch="true" attribute to links. If you split your multi-page template into separate pages, you can then pre-fetch them so they will be added to the DOM and appear "instantly" when the link to them is clicked (rather than waiting for the AJAX request to resolve).

Docs for prefetching: http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html

Upvotes: 5

Related Questions