Guide: Show loading while change pages in jQueryMobile

I was looking for a why to show “Loading Please Wait” between pages transition in jQueryMobile for a while. Unfortunately, I was not able to find a good guide for this. All available resources are general and do not handle issues like, data-rel and Popups.

Why I want to do that? because in some cases, I have to retrieve some data through Ajax and it might take time to load, I want the user to know that there is something going on.

Fortunately, I was able to figure it out on my own. It works like a breeze J. My solution, I believe handles all cases. I am using jQueryMobile 1.2 along with jQuery 1.7.1.

The key to this, is using pagebeforechange event. Keep in mind that pagebeforechange event is fired twice if you use single page template. Why is that?. This is because pages are called by url i.e changePage (“next-page.html”), so what happened actually is that pagebeforechange takes the string “next-page.html”, find the page, get it as an object in the DOM then triggers changePage($”#next-page-id”). This in turns fires pagebeforechange again.

Below the code, and I’ll explain it afterwards line by line

1: $(document).bind("pagebeforechange",function(e, data){
2:	if (typeof data.toPage == 'object'){ 
3:		if (typeof $.mobile.activePage == 'object') {
4:			if($.mobile.activePage.attr("id") != 
5:                           data.toPage.attr("id"))			 
6:				 showLoadingMessage(true);
7:		} else 
8:			showLoadingMessage(true); 
9:	}
10:});

• Line 1: if you cannot get it, I believe you should stop here and go to read more about jQuery and jQuery Mobile J
• Line 2: if single page template is used, I want to make sure that the loading message will appear after I had the page object. Why? remember pagebeforechange do fire on any anchor click. I want to avoid to show it when I am opening a popup
• Lines 3,4 and 5: we need to check if the active page is not the same as the target page! why? because when closing a dialog, or a popup i.e data-rel back pagebeforechange is fired too! I don’t want to show the loading message when I close a popup or a dialog
• line 6: showLoadingMessage is my custom function to show the loading message. I highly recommend using the Loading Widget if you’re using jQueryMobile 1.2. If not don’t bother with the $.mobile.showLoadingMessage in earlier versions, it’s very sluggish.
• Line 7: Seriously! are you a web developer!
• Line 8: if you don’t have an active page, this means you’re on the first page :)… show the loading message. If you’re not getting any data of the first page you might want to remove this line. It’s optional.

What’s next?
After the work on each page is complete, you want to call the function that closes the loading message, in my case I call my custom loading function with “false” i.e. showLoadingMessage(false);

Hope this helps, it works perfectly with me, let me know if there is any corner case I forgot about.

HINT: make sure to include showLoadMsg in the options for all $.mobile.changePage to avoid any undesireable behavior