jQuery Mobile Refresh the current page on click

Question

I have a multi page template in query mobile. How can I refresh the current page on click of a hyperlink or button? I'm using JQM version 1.4.5

I have tried with the following code which suggested in how to refresh(reload) page when click button in Jquery mobile , however, it is not working as expected:

// Refresh the store main page - experimental
$(document).on('click', '#aStoreReload', function (event) {
    $.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        showLoadMsg: false,
        reload: true // tried reloadPage: true also
    });
});

It is going back to the main page with URL as it is. I mean http://localhost:56235/main.html#storeMainPage in local server. However, JsBin is displaying a blank page whereas jsfiddle doing nothing. Click on store link to get the page where it has refresh button.

How can I refresh the page (view) in a proper way?

Edit

I tried with the following scripts as well on click event:

$.mobile.changePage($("#storeMainPage"), { transition: 'slidedown' });
$(document).pagecontainer("load", "#storeMainPage", { reload: true });

The first like does nothing and second line gives an error Uncaught Error: cannot call methods on pagecontainer prior to initialization; attempted to call method 'load' which is normal as we are calling pagecontainer before its initialization.

Answer 1

Based on @ezanker's answer, finally I was able to reload the page on button click. I have to prefix the page name to the hash to get the page reloaded and re-call all the ajax functions in pagebforeshow event.

The code I have used is as below

// Refresh the store main page - experimental
//$(document).on("pagecreate", "#storeMainPage", function () {
    $(document).on('click', '#aStoreReload', function (event) {
        $(":mobile-pagecontainer").pagecontainer("change", "main.html#storeMainPage", {
            reload: false,
            allowSamePageTransition: true,
            transition: "none"
        });
        $('#storeMainDesc').text("Latest Store Updates"); // reset the text.
    });
//});

Note the changes in code. One filename prefix, second one reload: false attribute. If I use the attribute reload: true, the previous page would get loaded with the url as it is; i.e. http://localhost:56235/main.html#storeMainPage. Don't know what's wrong.

Answer 2

Use the pagecontainer widget's change method (not load):

$(document).on("pagecreate","#storeMainPage", function(){ 
    $(document).on('click', '#aStoreReload', function (event) {
        $( ":mobile-pagecontainer" ).pagecontainer("change", "#storeMainPage", {  reload : true, allowSamePageTransition : true, transition : "none" });
    });    
});

This will cause the pageshow event to re-trigger.

Updated FIDDLE

Answer 3

What about simple:

location.reload();

Anyway, $.mobile.changePage is deprecated:

Note: jQuery.mobile.changePage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use the pagecontainer widget's change() method instead.

reference