CODEWITHSUNDEEP
cordovajquery-mobile
the_new_mr
the_new_mr

Reputation: 3733

Showing page before data request on jQuery mobile

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.

Upvotes: 0

Views: 218

Answers (2)

Gajotres
Gajotres

Reputation: 57309

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.

Upvotes: 1

dpfauwadel
dpfauwadel

Reputation: 3934

And if you do something like this

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

function onDeviceReady() {
syncData();
}

Upvotes: 1

Related Questions