CODEWITHSUNDEEP
jquery-mobile
crazystick
crazystick

Reputation: 610

How to stop jQuery Mobile calling $.mobile.loading('hide') during changePage?

I'm trying to stop jQuery Mobile hiding the loading spinner when changePage is called.

The program flow goes like this, starting with clicking a link, which has its click event defined like this:

$('body').delegate('.library-link', 'click',  function() {
    $.mobile.loading( 'show' );
    $.mobile.changePage($('#page-library'));
    return false;
});

Upon clicking the link, the pagebeforeshow event is fired, which triggers a function to populate the page from the local storage, or else make an ajax call to get the data.

$(document).on('pagebeforeshow', '#page-library', function(event){
   ui.populate_data(); 
});

In ui.populate_data() we get the data from local storage or make an ajax call.

ui.populate_data = function() {
    if (localdata) {
        // populate some ui on the page
        $.mobile.loading( 'hide' );
    } else {
        // make an ajax call
    }
};

If the data is there, we load the data into the container and hide the loading spinner. If not it makes the ajax call, which on complete saves the data in local storage, and calls ui.populate_data()

The problem is, after the pagebeforeshow event is finished, changePage is calling $.mobile.loading( 'hide' ), even though the data might not be there yet. I can't find any way to prevent changePage from hiding the spinner, other than by temporarily redefining $.mobile.loading, which feels pretty wrong:

$('body').delegate('.library-link', 'click',  function() {
    $.mobile.loading( 'show' );
    loading_fn = $.mobile.loading;
    $.mobile.loading = function() { return; };
    $.mobile.changePage($('#page-library'), {showLoadMsg: false});
    return false;
});

and before hiding the spinner in my ui function:

ui.populate_data = function() {
    if (localdata) {
        // populate some ui on the page
        if (typeof loading_fn === 'function') {
            $.mobile.loading = loading_fn;
        }
        $.mobile.loading( 'hide' );
    } else {
        // make an ajax call
    }
};

Surely there must be a way to get complete control over the showing and hiding of the loading widget, but I can't find it. I tried passing {showLoadMsg: false} to changePage, but as suggested by the docs it only does things when loading pages over ajax, which I'm not doing.

Upvotes: 3

Views: 3568

Answers (1)

arod
arod

Reputation: 14042

Maybe it's too much for many, but I found a solution other than the written in the comments (which didn't work for me).

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.

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

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

(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...

Upvotes: 1

Related Questions