1

I've been through the solutions in the two questions related to this - JQuery document.ready vs Phonegap deviceready and Correct way of using JQuery-Mobile/Phonegap together? and am still no closer to a solution.

Our issue is with PhoneGap Build plugins. We're using the Device plugin to target specific UI component positions and sizes to iPhones 4 and 5. In doing so we need to call the event listener, use the Device plugin to get the device model, set a variable (iOSversion = true) and then use that variable when we build the UI.

We can't get it working.

We're using jQuery Mobile so everything is in a 

 $(document).ready(function(

This has 

document.addEventListener("deviceready", false);

in it, as well as the rest of our scripts and the UI initialisation scripts. jQM is the template, but we're building content and UI components based on JSON data. Up until this point it's all been fine.

The problem is the UI initialisation script seems to start BEFORE the event listener has finished doing whatever it does and so iOSversion is never, ever true by the time the UI script runs.

Yes, we could call it from onDeviceReady in:

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

but then we can't test in the browser.

I'm sure there is some simple solution to this that I'm missing, but we've been at it for a day now and it's the final hurdle and has got everyone really frustrated.

Community
  • 1
  • 1
Subjective Effect
  • 1,465
  • 2
  • 17
  • 37
  • `mobileinit` fires before `.ready()` (i dont know about cordova). You can disable auto-init at that stage until you get all your data collected and then fire an initialization function. – Omar Oct 29 '14 at 21:27
  • Are you saying I should put the event listener into mobileinit in order to fire the Cordova plugin first? – Subjective Effect Oct 30 '14 at 01:02
  • I'm not experienced with cordova. If you plan to try it, place `mobileinit` code after jQuery and before jQM library. At least to check which event fires before, whether `mobileinit` or `deviceready`. At that stage, you can delay initializing the page until you get all required data. – Omar Oct 30 '14 at 01:15

1 Answers1

3

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
}
Subjective Effect
  • 1,465
  • 2
  • 17
  • 37