3

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.

Serge P
  • 1,173
  • 3
  • 25
  • 39
crazystick
  • 590
  • 5
  • 14
  • do you want to turn it off completely? – Omar Aug 23 '13 at 14:38
  • I need to be able to manually show and hide it, but I'd be OK with having to do it manually everywhere – crazystick Aug 23 '13 at 15:33
  • 4
    Try `$('.ui-loader').hide();` and `.show()`. What versions of jq and jqm are you using? – Omar Aug 23 '13 at 15:46
  • @Omar that worked. I had assumed that $.mobile.loading( 'hide' ) would call $('.ui-loader').hide() but somehow it doesn't. I don't understand it, but anyway, if you want to make it an answer, I'll accept it. If you can explain why it works, even better! I'm using jQ 1.9.1 and jQM 1.3.2 – crazystick Aug 23 '13 at 16:51
  • 1
    Well, both functions somehow do the same job. However, when using `.loading()`, it adds `.ui-loading` to `` and changes `.ui-loader` _display_ property to _block_. Weird, isn't? – Omar Aug 23 '13 at 17:08

1 Answers1

1

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

arod
  • 13,481
  • 6
  • 31
  • 39