Jquery Document.Ready VS Phonegap Deviceready

JQuery document.ready vs Phonegap deviceready

You should use the deviceready event to avoid funny things happening.

The docs state:

This is a very important event that every PhoneGap application should use.

PhoneGap consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a PhoneGap JavaScript function before it is loaded.

The PhoneGap deviceready event fires once PhoneGap has fully loaded. After the device has fired, you can safely make calls to PhoneGap function.

Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.

Read the documentation here:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

Phonegap deviceready vs document ready

if your are using jquery try this

$(document).ready(function(){

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

function onDeviceReady(){
    //write your function body here

}

if your are using javascript only try this

if(document.readyState === "complete") {
  document.addEventListener("deviceready",onDeviceReady,false); 
}

function onDeviceReady(){
        //write your function body here

    }

Using jQuery Mobile and $(document).ready with PhoneGap Build and document.addEventListener(deviceready)

I got the answer.

window.cordova is exposed in Phonegap Build. So I check for the existence of this, with in the jQuery $(document).ready like this:

if ( !!window.cordova ) {
 // phonegap script has loaded so have our 
 // initializeApplication called when the device is ready
 document.addEventListener("deviceready", 
            initializeApplication, false);
}
else {
 // running in browser without phonegap so 
 // manually call initializeApplication
 initializeApplication();
}
function initializeApplication() {
 // do everything here to initialize the
 // application and its UI
}

Need the document ready inside deviceready?

The way that this works is jQuery(document).ready() fires first and then deviceready fires.

I generally set up my code like this:

jQuery(document).ready(function () {
    // do document ready stuff
}).on('deviceready', function () {
    // do deviceready stuff, put all calls to plugins in here
});

So the question as to where initCampusWeb goes depends on what you are doing inside that function. If it uses plugins, put it inside the deviceready handler.

Phonegap not calling device ready function

onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.

Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.

In my index.html

 <script type="text/javascript" src="js/libs/LABjs/LAB.min.js"></script>
 <script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>

Please notice I use the LABjs Library to load JS scripts (cordova.js is being to be loaded only if we detect that we are in a device), you can find it in google for LABjs library.

In my "js/index.js"

 var deviceReadyDeferred = $.Deferred();
 var jqmReadyDeferred = $.Deferred();
 var resourcesReady = false;

 var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);

        //load scripts
        if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
            $LAB.script("cordova.js").wait(
                function(){
                    document.addEventListener('deviceready', this.onDeviceReady, false);
                    console.log('We are on Device');
                }
            );
        }else
        {
            console.log('We are on Browser');
            var _this = this;
            setTimeout(function(){
                _this.onDeviceReady(); 
            }, 1);
        }

        console.log('app.initialize() Called');
        $.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady);
    },

    // deviceready Event Handler
    onDeviceReady: function() {
        console.log("onDeviceReady");
        deviceReadyDeferred.resolve();
    },

    doWhenBothFrameworksReady: function()
    {
        console.log("doWhenBothFrameworksReady");
        resourcesReady = true;
    }
};

$(document).one("mobileinit", function () {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.phonegapNavigationEnabled = true;
    console.log('MobileInit');
    jqmReadyDeferred.resolve();
 });

function PageShowFunction(e)
{
    // we are sure that both frameworks are ready here
}

function CallPageEvent(funcToCall,e)
{
    if(resourcesReady)
    {
        return funcToCall(e);
    }else
    {
        setTimeout(function() {
            CallPageEvent(funcToCall,e);
        }, 200);
    }
}

$(document).ready(function () {
    console.log("document ready");
    // ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late 
    // example:
    // I use the CallPageEvent beacause this event could be called before the device ready
    /* 
     $("#page").on("pageshow", function(e) {
                CallPageEvent(PageShowFunction,e);
            }
     */

});

app.initialize();

The relationship between Phonegap's onBodyLoad()/onDeviceReady() functions and Jquery's $(document).ready()

$(document).ready will always fire first because it is triggered when all the DOM elements have loaded. Images, javascript functions, css, etc. may not have loaded by this time.

So PhoneGap has you put the onload method on the body's onLoad method so that it fires when that particular part of the DOM is ready. Once the DOM is prepared, you create an event listener to ensure that phonegap.js itself is ready (and not just the application UI, for example). Only after phonegap.js is loaded can you use the functions that it provides.

So yes, $(document).ready will fire first, but that does not mean that you can use phonegap.js (the 'api' calls). You cannot put $(document).ready inside of another function (as far as I know), since it is triggered by the DOM being loaded. You can (but should not) however call your onDeviceReady function from $(document).ready. The problem with this is that if the device is NOT in fact ready, the api calls will not be made.

So I would continue to use the body onLoad/onDeviceReady chain they have set up. Let me know if this needs more elaboration.

---

Related Topics