jQuery Mobile - Problems getting showPageLoadingMsg to work with pagebeforeshow or pagebeforeceate

Question

I'm on my second week of trying to resolve this issue of getting a load message to properly display :-(

I'm just having a very tough time getting either the pagebeforecreate or the pagebeforeshow events to fire the $.mobile.showPageLoadingMsg().

Here's a link to example on jsfiddle:

    [http://jsfiddle.net/7fxQf/25/][1]

Note the jsFiddle is referencing the mobile 1.0b3 library.

Here's sample of the basic code snippet that should work, but does not:

$('#mypageone').live('pagebeforecreate', function (event, ui) {
   alert('Just selected page one!');
   //HEY!!! the page load never pops up :-(
   $.mobile.loadingMessage = "this msg set on live pageshow from mypageone...";
   $.mobile.pageLoading();
   $.mobile.showPageLoadingMsg();
  calcLongList();  //simple list generation of a 1000 lines to screen
 //$.mobile.hidePageLoadingMsg();
});

I can get the alert to fire, but sadly not the load message, when a page is actually loading.

...but however, if change to just "pageshow", the load message will display, but of course after the 5-10 seconds it takes to generate the list :-( ...which is certainly not what I want.

Also, it does not matter if I comment out the calcLongList function or not...the page load msg behaves the same: works for 'pageshow'...but not for the 'pagebeforeshow' or the 'pagebeforecreate'...and I'm pulling my hair out trying to figure out what I might be doing wrong?

Any advice or guidance would sure be appreciated, thanks in advance

Answer 1

When jQM shows the loading indicator, it adds a class to the html object (.ui-loading) that it removes with $.mobile.hidePageLoadingMsg(). In some cases though, it won't add this class to the html (because it can't - try adding it manually).

Easy (and slightly dirty) fix is manually adding the class not to the html object, but to the body:

$('body').addClass('ui-loading');

To remove the loading spinner, simple remove the class again:

$('body').removeClass('ui-loading');

Answer 2

If you have problem to show text message try to change jquery mobile.js setting text visible to TRUE file in this way:

(function( $, window ) {
    // DEPRECATED
    // NOTE global mobile object settings
    $.extend( $.mobile, {
        // DEPRECATED Should the text be visble in the loading message?
        loadingMessageTextVisible: **undefined**,

        // DEPRECATED When the text is visible, what theme does the loading box use?
        loadingMessageTheme: undefined,

        // DEPRECATED default message setting
        loadingMessage: undefined,

TO:

(function( $, window ) {
    // DEPRECATED
    // NOTE global mobile object settings
    $.extend( $.mobile, {
        // DEPRECATED Should the text be visble in the loading message?
        loadingMessageTextVisible: **true**,

        // DEPRECATED When the text is visible, what theme does the loading box use?
        loadingMessageTheme: undefined,

        // DEPRECATED default message setting
        loadingMessage: undefined,

AXL

Answer 3

I'm having the same issue. I'm not sure if it's caused by the same thing or not, but I have my footer toolbar as inline. So I scroll to the bottom of the page, click the page to load, then on the next page trigger the loading message (I'm doing some dynamic ajax loading of content). It looks like the loading message isn't there, but it actually is. It just has a "top" value of something around 1700px, so I don't see it. When I click a link to the same exact page that is at the top of the page, I see the loading message fine.

It looks like jQM is trying to persist the loading message or something. Not sure.

So.. there's your guidance. I don't have an answer for you yet besides doing something like:

$(".ui-loader").css({"top": "400px"});

That's probably what I'll do. Hope that helps!

EDIT

This is what I ended having to do. Tested and it works. When I start my ajax call:

$(".ui-loader").css({"display": "block", "top": "252px !important" });

When the ajax call completes:

$(".ui-loader").css({ "display": "none" });

EDIT 2

Sorry, after some testing I figured out you don't want to set "display: block;" or "display: none;" using the .css() jQuery function. That'll set the style attribute on the element itself and override what jQM wants to do. Do this instead -- when starting the call:

$(".ui-loader").css({ "top": "252px !important" });
$.mobile.showPageLoadingMsg();

When finished loading:

$.mobile.hidePageLoadingMsg();