Question

I am new to Jquery Mobile and attempting to learn it as I redevelop this mobile site. So I am doing all my navigation with different divs with data-role=”page”. and navigating with the #pagename. My question being doing my navigation this way how do I use the loading message and wait to make the transition until the next page is loaded? I tried putting the $.mobile.pageLoading() in the onClick attribute of the link but that didn’t work.

Answer 1

Using JQM 1.0 beta 1

//show
$.mobile.showPageLoadingMsg();

//hide
$.mobile.hidePageLoadingMsg();

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/api/methods.html

http://jquerymobile.com/test/docs/api/methods.html

Update:

This method is also the accepted way to do it in the official 1.0 release.

http://code.jquery.com/mobile/latest/demos/docs/api/methods.html

mobile.showPageLoadingMsg ()

Show the page loading message, which is configurable via $.mobile.loadingMessage.
Example:

//cue the page loader 
$.mobile.showPageLoadingMsg();

$.mobile.hidePageLoadingMsg ()

Hide the page loading message, which is configurable via $.mobile.loadingMessage.
Example:

//cue the page loader           
$.mobile.hidePageLoadingMsg();