Question

Is there a way to change pages in jQuery Mobile but still have $(document).ready function initiate? I seem to running into some problems when calling $.mobile.changePage because my pages are not always fully loaded….

Or instead of finding an alternative to changePage, is there a way to refresh a page once it’s been loaded into the DOM by changePage??

Answer 1

This answer was wrong and useless, so here’s one that will actually help people…
– Jasper

Documentation: http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

Specifically you are looking for the reloadPage option:

reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. Used only when
the ‘to’ argument of changePage() is a URL.

So, something like this will work:

$.mobile.changePage('/some/url.html', {
    reloadPage : true
});

You can also bind to the pageinit event for specific pseudo-pages in order to run code specifically for those pseudo-pages:

$(document).delegate('#page-1', 'pageinit', function () {
    //run code for #page-1 pseudo-page
}).delegate('#page-2', 'pageinit', function () {
    //run code for #page-2 pseudo-page
}).delegate('#page-3', 'pageinit', function () {
    //run code for #page-3 pseudo-page
});

Then I would suggest putting all of the code for the whole site in a single .js include and include it in the or outside of any data-role=”page” or data-role=”dialog” elements of each document. This way the code for your site will always be present, no matter how the user has landed on the site or navigated around.