document.ready vs deviceReady

[Raymond Camden]

What is the safest/most recommended/etc way to handle document.ready in jQuery versus deviceReady? Basically, can one assume document.ready won't fire _before_ the device is ready? Or should event handlers for _both_ be written that check the state of the other and perhaps fire a 3rd event to let our code know that both conditions are ready? (If this doesn't make sense, please let me know. :)

[ericburnley]

I just saw a thread on this yesterday. Not sure how PG devs would
rate the answer, but it sounded fairly solid.

http://stackoverflow.com/questions/5036703/the-relationship-between-phonegaps-onbodyload-ondeviceready-functions-and

On Android 2.3.4 recently using Phonegap 1.0.0 and 1.1.0, I've
experienced some issues with deviceready kicking off reliably for some
reason (might be my own fault, I've not tracked it down yet), so I'm
using the body's onLoad event to kick off my onDeviceReady() function
until I get it sorted out.

An aside, but if you're not using jQuery Mobile specifically, I would
recommend looking at a lighter javascript library like XUI or Zepto or
something. There are lots of them out there and they do pretty much
everything you'd need jQuery for unless you have a lot of jQuery-
specific plugins (which I'd not recommend for mobile, for performance
reasons). Keeping things as light as possible is really important for
the user experience on mobile.

[Raymond Camden]

So do you use body=onLoad to add the listener or do you use body=onLoad to run a function that _assumes_ device is ready? I'm thinking you meant the first option but want to test.

As an aside - you don't think JQM is well designed for mobile? I've had pretty good luck with it.

[ericburnley]

Currently, I'm just running my data loads based off of the body onLoad
event directly, not waiting for the deviceready. I tested adding the
event listener in the body's onLoad event, and nothing happens the
first time I go to the page. Once I leave the page & go back, it
loads fine. I may just have something messed up, but that's the
behavior I'm seeing so I had to code around it. I haven't seen any
issues with Phonegap functionality not working when relying on the
body's onLoad event so far, but I realize there's a possibility.
Again, this goes against the way PG is supposed to work so I don't
advocate it, I'm just trying to see if anyone else has experienced
this or if maybe I just have something else messed up.

As for jQM, no I don't have anything against jQM. I was saying if
you're using jQuery for anything OTHER than jQM in your mobile app,
you might want to consider another library since it's not inherently
necessary to use jQuery to accomplish stuff like getting/setting DOM
elements, XHR data transfers, etc. XUI works great for me, and it's
1/8th the footprint. If you're using jQM, you obviously need jQuery,
and that'll be a fine app.

[Bryce Curtis]

You need to register for deviceready event in your onload handler.  Once deviceready event is received, then you can call PhoneGap API.

[ericburnley]

Hope I'm not sidetracking the OP's question, but...

Bryce, I did try loading phonegap.js a number of ways- I tried adding
the event listener in the XUI window load event - then I found that
document ready/deviceready thread above and pulled it out of there.

Then I added the event listener to the body's onLoad handler, but
still it wouldn't fire the deviceready's function. If I leave the
deviceready event listener totally out of the mix and just load my
dynamic content via the body onLoad event, things load fine and I can
run Phonegap functionality. If I depend on the deviceready event
listener to run my dynamic content loader function, it never fires and
no Phonegap functionality is available - for example, I have a menu
button event listener that doesn't fire if it depends on the
deviceready event listener, but does work if I use body onLoad to call
a function that includes the menu button event listener.

I did mention this in a post earlier this week - though at the time I
thought it was Connection API related, which it's not:
http://groups.google.com/group/phonegap/browse_thread/thread/31668b452221d74b

This kind of sounds like what I'm experiencing, since this all seemed
to start happening once I started trimming down my page size, taking
out whitespace, externalizing css & js- I've not tried loading
phonegap.js twice, though:
http://groups.google.com/group/phonegap/browse_thread/thread/bcf500e6c0ee46f2/9e601da3dacd67d0?lnk=gst&q=register+onload#9e601da3dacd67d0

[Raymond Camden]

Bryce, I do get that. My main question though was in regards to document.ready _and_ deviceReady, and if there was a good way to ensure _both_ are ready to go.

[Bryce Curtis]

I don't use jQuery, so this is a guess, but try PhoneGap.waitForInitialization("jquery") and PhoneGap.initializationComplete("jquery").  Place waitForInitialization right after loading phonegap.js and before loading jquery.js.  Then in document.ready, you can call initializationComplete.  This should delay PhoneGap initialization until after document.ready fires.