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??
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.
In jQuery Mobile, ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handlers (i.e. all events bounded using $(document).ready()) only execute for the first page. To execute a specific event on a page when it is shown you can try putting this on a specific page,
$(document)
.unbind("pageshow.somenamespace")
.bind("pageshow.somenamespace",
function() {
// code here
}
);
