jQuery Mobile Binding Spinner To ChangePage

Question

After a lot of google'ing and reading forums I've not found a suitable answer.

So far all I have found is something like below:

• show loading message
• call change page
• hide loading message

This would work but I would have to do this every time I call load/change page (which is a lot).

Which would leave me either to make a middle man function like below:

function customLoader(url){
    showLoader();
    $.mobile.changePage(url);
    hideLoader();
}

Is there anyway of binding it to the change page event? So that it shows from the second changePage is called but hides once changePage is away...

I know the above middle man method would work but would like something more tidy and nicer to implement as there's a lot of html/js files.

Answer 1

Something like this:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $.mobile.showPageLoadingMsg(true);
        setTimeout(function () {
            $.mobile.changePage('#second');
        }, 1000);
    });    
});

$("#second").live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

Timeout is here only so you can see it's working successfully. This is a light example so transition is fired quickly. Remove it in your real code.

And here's an example: http://jsfiddle.net/Gajotres/arrHd/

Every change page event cycle has a order of events occuring when a page A is transiting to a page B. No matter which action is used to trigger a change page you can always disable it when page B i successfully loaded. If you want to find more about page load order take a look at this link: https://stackoverflow.com/a/14010308/1848600 . There you will find a lot about jQM page dynamics.

In case you want to implement this into every page transition use this:

$('[data-role="page"]').live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

This will hide a ajax loader (if it is open) every time a different page is successfully loaded and shown.

Answer 2

Maybe it's too much for many, but I found a solution different than the written in the comments of this question .

I use the jquery mobile router and in the 'show' event of a page, I do $.mobile.loading("show"); , so when the page appears it does with the loading spinner showing.

I use Jquery Mobile Router for a lot more, but it solved this issue.

Though to hide the spinner, I had to use $('.ui-loader').hide(); , which is weird, I know...

(Maybe just listening to the proper event and triggering the spinner would also work, as this is what JQMR does...)

I'm using JQM 1.4.2...