jQuery has the "ready" function:

$(function() {...});

and the cordova documentation says to add an event listener:

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

Do I need to call both of these to make sure both the libraries are loaded before any code that references them is used?

Does it make sense to nest them, i.e.:

$(function(){
    onDeviceReady(){...}
}

Just trying to figure out the best way to do this, maybe I am overthinking it

jQuery has the "ready" function:

$(function() {...});

and the cordova documentation says to add an event listener:

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

Do I need to call both of these to make sure both the libraries are loaded before any code that references them is used?

Does it make sense to nest them, i.e.:

$(function(){
    onDeviceReady(){...}
}

Just trying to figure out the best way to do this, maybe I am overthinking it

• javascript
• jquery
• cordova
• dom-events

Share Improve this question Follow edited Jun 21, 2020 at 22:15 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 14, 2013 at 17:27 kburbachkburbach 7591111 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

JS files are loaded sequentially. So in your HTML just put your .js file after jQuery and cordova and it won't run before both are loaded.

<script src="jQuery"></script>
<script src="cordova"></script>
<script src="yourScript"></script> <!-- this won't run before both jQ and cordova are loaded -->

As for ready events, if you don't want to nest them, you could construct your own event for when all the libraries are ready:

var listener = {
    jquery: false,
    cordova: false,
    fire: function(e) {listener[e] = true; if (listener.jquery && listener.cordova) go();
};
document.addEventListener("deviceready", function(){listener.fire('cordova'), false();
$(document).ready(function(listener.fire('jquery')){});

function go() {
// your code here
}

This will work, and go() will fire when all are loaded, however I'm really not sure if you actually need all of this and is there a simper way to do it.

Put document.ready inside deviceready:

var onDeviceReady = function (){
    jQuery(document).ready(function (){
        // go!
    });
};

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

jQuery's ready() is a proxy for DOMContentLoaded and signifies that the document is parsed and can safely be queried or manipulated.

jQuery itself (jQuery, $) is available as soon as the library has finished executing; you don't need to do anything special to wait for that.

You can call your jquery functions after the deviceready .Let me give you a full example of how you can do this. First ensure you have added the needed cordova/phonegap plugin that youre going to use.In my case I have loaded the device plugin.

Open a blank document add the html skeleton then in the head part of your html,add the following:

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>//include the cordova.js file
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>//include the jquery.min.js file strictly after the cordova.js file
<script type="text/javascript" charset="utf-8">


    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {

        $(document).ready(function(){ //jquery starts here and is inside the device ready function


            //the next few lines are now the calling my plugins
            //#deviceproperties is a paragraph in html that has an id deviceproperties
            //#hideme is a span inside the paragaraph that has the id deviceproperties.inside the span is the statement that is saying 'loading device properties' and will be removed as soon as the script hide() runs

           $('#deviceProperties').prepend("<br>" + device.cordova 
                                 + "<br>" + device.platform
                                 + "<br>" + device.uuid
                                 + "<br>" + device.version
                                  );

            $('#hideme').hide();//hide the loading device properties
        });//lets end jquery`s document.ready

    }//lets end cordova`s device ready

</script>

Loading device properties...