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

Question

I am using PhoneGap + jQuery Mobile in Android, I am confused about the Phonegap\'s \"onBodyLoad()/onDeviceReady()\" functions and Jquery\'s \"$(document).ready()\".

<

Answer 1

$(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.