JQuery Mobile + Phonegap: page is shown before device ready

Question

I'm working on an iOS app with phonegap. I encountered a problem. It seems that the event device ready is fired after the page (and other AJAX functions) is fired.

Sample code:

Global.init = function() {alert("ready");}
$(function(){
    document.addEventListener("deviceready", Global.init, false);
});
$('#landing').live('pageshow', function(){alert('pageshow')});

I will see the alert 'pageshow' before the alert 'ready' (a couple of seconds). Is there anyway to ensure all the JQuery mobile code is executed after the device is ready?

Please refer to this question.Hope this helps http://stackoverflow.com/questions/5036703/the-relationship-between-phonegaps-onbodyload-ondeviceready-functions-and — saraf, Nov 27 '12 at 10:39

score 1 · Answer 1 · answered Mar 08 '14 at 20:17

You must trigger the 'pageshow' event once the "pageshow" functionality was delegated inside the deviceready event handler:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $("#details_page").on("pageshow", function() {
        console.log("Hello world!");
    });
    $("#details_page").trigger("pageshow");
}

score 0 · Answer 2 · edited May 23 '17 at 10:25

Answer from here

Note that you can only run code after the deviceready event has been fired.

So with the device ready event it would be like so :

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $(document).delegate("#details_page", "pageshow", function() {
        console.log("Hello world!");
    });
}

Note that if the #detalis_page is the first page to load , the first "pageshow" won't be called since it comes before the device ready, place your initial code in onDeviceReady() function and the repeated code for each pageshow into the delegate function.

JQuery Mobile + Phonegap: page is shown before device ready

2 Answers2