jQuery Mobile - refresh page with $.mobile.changePage - jquery-mobile

Question

I have a simple function that opens a page with jquery mobile; the page structure is like that:
$(document).on('pageinit','#page', function(){
//all script
});
My function:
function dettail(id) {
//alert(id);
localStorage.setItem("id", id);
var url = "#page";
$.mobile.changePage( url, {transition: "none", reloadPage:true} );
}
This function doesn't load #page; "reloadPage:true" why doesn't work?
ps (I used pageinit and no pageshow because I need that the page is loading only in one case).

Answer 1

Try using the allowSamePageTransition option, i.e.:
$.mobile.changePage(
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
);
Taken from http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/

Answer 2

If I understand your question correctly, you are trying to refresh just a specific #page portion within a multi page layout.
As you have discovered, the $.mobile.changePage does not work like that, it retrieves a fresh copy of the entire page from the server and not just the #page portion you want to refresh. The work around I came up with uses an 'emulated' refresh, for lack of a better term.
The following will walk you through the setup/use of the emulated refresh:
Step 1 - Create an empty page
Place the following html code into the body .. /body section of your multi page layout
<div data-role="page" id="empty_page_content" data-theme="b" data-content-theme="b"></div>
Step 2 - Your dettail() function
In the head .. /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place your dettail function, written as follows:
function dettail(id){
localStorage.setItem("id", id);
//emulate a refresh by switching to an empty page div (and then back to this page again)
$.mobile.changePage(
'#empty_page_content',
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
}
Step 3 - Setup a pageshow event on the #empty_page_content page
In the head ... /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place the following js code:
$(function() {
$(document).on("pageshow", "#empty_page_content", function() {
//console.log('pageshow event - #empty_page_content only');
// return to #page whenever this page is loaded
// The return url is hardcoded in this example but it could be switched to a variable if different return pages are needed
$.mobile.changePage(
'#page',
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
});
});
Step 4 - doing stuff in your #page each time it is displayed
In the head ... /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place the following js code:
$(function() {
$(document).on("pageshow", "#page", function() {
//console.log('pageshow event - #page');
// .. do stuff here, such as look for a stored id value and update the content of the #page accordingly
});
});
I successfully tested this solution on a private network (so I don't have a link for you to go look at). Hopefully it will work for you in your project. If not let me know and I'll see if I can help you get it going.
Just remember that it is best to load all head .. /head javascript code that is needed for all your pages on every page (best done by loading the same external js file on all pages) because the js code in the head section is only ever loaded ONCE from the first page that is accessed. You may intend for users to initially browse page1 but unless you can guarantee it your code should work if page 2 or 3 or etc were initially loaded instead.

Answer 3

reloadPage:true works only with page urls, not page ids
therefore:
$.mobile.changePage("#page", {
transition : "fade",
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true
});
will not work