jQuery mobile prefetching a page that load content via Ajax

Question

I am using jQuery mobile in single page template (Each page is a separate html file). I want to prefetch a page that load content via Ajax. I put the prefetch code in Document.ready() function in first page

$.mobile.loadPage("my-projects.html", { showLoadMsg: false });

ajax call inside the Document.ready() function of second page which i want to prefetch. This ajax call is not happening when we preftech that page. Is there a way to achieve this. Please help

Answer 1

jQuery Mobile has prefetching built right in, all you have to do is add the data-prefetch attribute to a link that links to a remote page:

<a href="prefetchThisPage.html" data-prefetch> ... </a>

Source: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html

In a general sense, when you pull-in a page via AJAX, the document.ready function will not fire. You can however use jQuery Mobile Page events such as pageinit. For example:

$(document).delegate('#my-page-id', 'pageinit', function () {
    $.mobile.loadPage("my-projects.html", { showLoadMsg: false });
});