CODEWITHSUNDEEP
jquerymobilecordova
HuyT
HuyT

Reputation: 21

JQuery Mobile + Phonegap: page is shown before device ready

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?

Upvotes: 2

Views: 1756

Answers (2)

user3379382
user3379382

Reputation: 11

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");
}

Upvotes: 1

Wences Llobet
Wences Llobet

Reputation: 585

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.

Upvotes: 0

Related Questions