JQuery Mobile - problems getting showPageLoadingMsg to work with pagebeforeshow or pagebeforeceate

Question

I am in my second week trying to solve this problem in order to get a download message to display correctly: - (

It’s just very difficult for me to get either a page, or create a page, or create an event to run the $ .mobile.showPageLoadingMsg () file.

Here is a link to an example on jsfiddle:

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

Note that jsFiddle is referencing the 1.0b3 mobile library.

Here is a sample base code snippet that should work, but 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 a warning, but unfortunately this is not a loading message when the page really loads.

... but, however, if you change only to "pagehow", a download message will appear, but, of course, after 5-10 seconds to generate a list: - (... this, of course, is not what I want.

Also, it doesn't matter if I comment out the calcLongList function or not ... the loaded msg page behaves the same: it works for 'pageshow' ... but not for 'pagebeforeshow' or 'pagebeforecreate' ... and I pull my hair trying to figure out what i can do wrong?

Any advice or recommendations will be appreciated, thanks in advance

Answer 1

When jQM shows a loading indicator, it adds a class to the html object (.ui-load), which it removes with $ .mobile.hidePageLoadingMsg (). In some cases, however, it will not add this class to html (because it cannot - try adding it manually).

A light (and slightly dirty) manual fix does not add the class to the html object, but to the body:

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

To remove the boot counter, simply delete the class again:

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

Answer 2

If you are having trouble displaying a text message, try modifying jquery mobile.js, setting the text visible for the TRUE file like this:

 (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 have the same problem. I am not sure if this is caused by the same or not, but I have a footer toolbar as built-in. So I browse the bottom of the page, click on the page to load, and then on the next page it launches a boot message (I do ajax content loading dynamically). It seems that the boot message is not there, but in fact it is. It just has a “top” value of something around 1700 pixels, so I don’t see it. When I click on the link to the exact same page that is at the top of the page, I see a loading message normally.

It seems like jQM is trying to save a loading message or something like that. Not sure.

So there is your guide. I have no answer for you, besides something like:

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

Perhaps what I will do. Hope this helps!

EDIT

This is what I ended up doing. Tested and working. When I start my ajax call:

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

When the ajax call ends:

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

EDIT 2

Sorry, after some testing, I realized that you do not want to set "display: block;" or "display: none"; using the .css () jQuery function. This will set the style attribute for the element itself and override what jQM wants to do. Do this instead - when starting a call:

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

Upon completion of the download:

 $.mobile.hidePageLoadingMsg(); 

Answer 4

I did some tests, and in my project it ended up with a synchronization problem if I inserted a delay or error in the code that showed the Wait counter. When I delete it and track the log along with the user interface, I can see that it takes time, not the visualization of the user interface, rather than loading the data. Regards Kim