I want to programmatically transition from a page to a second page when clicking a button, and I want a loading message to be displayed from the moment the 'transition' event triggers until some time-demanding tasks have been completed (this is why I'm interested in displaying a loading message). These tasks aren't AJAX-related calls. 

The problem is that the loading message isn't appearing on the page when it is requested to appear once the 'transition' event triggers, and neither it is when requested once the 'show' event triggers.

The code I'm using is:

1. function onBttn_top2_click() {
2.       $(":mobile-pagecontainer").pagecontainer("change", "#p2", {changeHash : false});
3. }
4. function showLoader(msgText) {
5.       $.mobile.loading('show', {text : msgText, textVisible : true, theme : 'a' });
6. }
7. function hideLoader() {
8.       $.mobile.loading('hide');
9. }
10. $(document).on("pagecontainertransition", function(event, data) {
11.       console.log("#pagecontainer_transition triggered [" + $(data.toPage).attr("id") + "]");
12.       switch ($(data.toPage).attr("id")) {
13.             case "p1":
14.             break;
15.       case "p2":
16.             onTransition_p2();
17.             break;
18.       default:
19.       }
20. });
21. function onTransition_p2() {
22.       //perform long-time-consuming activity1
23.       showLoader("starting activity1...");
24.       //activity 1
25.       hideLoader();
26.       //perform long-time-consuming activity2
27.       showLoader("starting activity2...");
28.       //activity 2
29.       hideLoader();    
30. }

And here you have a jsfiddle example where the tasks 'activity1' and 'activity2' have been replaced by two time-demanding tasks. As you can check, the alert-sentences are displayed but not the show/hide sentences.

I'd really appreciate if anyone could tell me how I should do so that the loading message appears in the second page.