Showing page before data request on jQuery mobile

Question

When my mobile web app (which runs inside of PhoneGap) starts up, it performs a request for data from the server. The problem is that the screen stays black while it is performing this request. When this request is performed at any time other than at startup, the app shows a loading dialog to give the user some feedback that something is loading but on startup, it's not behaving in that way.

I am performing the request in a pageshow event handler.

Here is the code:

$("#home").on("pageshow", onHomeShow);

...

function onHomeShow() {
    syncData();
}

function syncData() {
   // show loading dialog and get the data here
}

Any and all help would be greatly appreciated. Thanks in advance.

score 1 · Answer 1 · edited May 23 '17 at 12:18

Then you should trigger ajax loader by yourself, it can be done easily. It will indicate to user that something is happening. Also if possible initialize your method in some earlier page event like pagebeforecreate.

Working example: http://jsfiddle.net/Gajotres/Zr7Gf/

$(document).on('pagebeforecreate', '[data-role="page"]', function(){     
    setTimeout(function(){
        $.mobile.loading('show');
    },1);    
});

$(document).on('pageshow', '[data-role="page"]', function(){  
    setTimeout(function(){
        $.mobile.loading('hide');
    },300);      
});

In my example setTimeout is needed because web-kit browsers will not show loader unless it is executed with setTimeout or setInterval. Use this block:

setTimeout(function(){
    $.mobile.loading('hide');
},1);

when your function execution ends. If you want to find out more about jQM page events take a look at my other answer: jQuery Mobile: document ready vs page events or in an official documentation.

EDIT :

I forgot, replace [data-role="page"] with an id of your initial page.

Thanks for input but my problem was that it runs too early on startup, not too late. Also, I wasn't clear, I'm already showing the loading the dialog and loading the data manually. Thanks for the link to your other answer though. I learnt a lot from it and have bookmarked it as a reference. — the_new_mr, May 22 '13 at 13:33

score 1 · Accepted Answer · answered May 22 '13 at 12:28

1

And if you do something like this

document.addEventListener('deviceready', this.onDeviceReady, false);

function onDeviceReady() {
syncData();
}

answered May 22 '13 at 12:28

dpfauwadel

3,866
3
23
40

Thanks! That worked well. So simple and effective. I still want the app to sync data every time it goes to the home page automatically so I'm going to put some logic in there to set a flag when its run from onDeviceReady so that it only runs from onHomeShow when the flag is set. Thanks again! – the_new_mr May 22 '13 at 13:32

Showing page before data request on jQuery mobile

2 Answers2