Phonegap deviceready not firing using Cordova 2.2.0 in iOS

javascript jquery ios cordova

22,191

Solution 1

in my html I have a onload that triggers that adding of an event listener to deviceready

      function onDeviceReady() {
        console.log("we are an app");
        MyApp.initialize_phonegap();
      }

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

    </script>

  </head>

  <body onload="onBodyLoad()">

Solution 2

To add to olore's answer I ended up using the approach that the code in the default project (that gets built from the ./create script) uses (which is different to the code in the Event docs).

The major differences are (I do not really know which one of these actually are to be taken into account):

cordova-2.2.0.js is located in the root folder
<script>s are included right before the closing </body>-tag and not in the document's head

deviceready-handling works like:

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');
    myApp.start(); //this is where I put the call to my App's functionality relying on device APIs
},
// Update DOM on a Received Event
receivedEvent: function(id) { // I didn't really use this, yet I left it in here as it's in the demo
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}
};

The last <script> tag just calls app.initialize()

This seems to work quite fine on iOS and Android and is a little more understandable to me than the double handler nesting from the docs.

Solution 3

It seems to make a difference if you are adding the deviceready listener before or after the cordova.js:

I was not able to find any documentation on this, but cordova.js intercepts calls to addEventListener + removeEventListener and calls only deviceready callbacks which has been added before cordova.js.

Solution in my case was just to rearrange the script order:

<script>
document.addEventListener('deviceready', ...)
</script>
<script src="cordova.js"></script>

22,191

Author by

m90

On the enthusiast side of professional and enthusiast

Updated on July 09, 2022

Comments

m90 almost 2 years
I am building a PhoneGap App. Unfortunately, when deploying to iOS devices and simulators the deviceready event never fires. I'm using Phonegap 2.2.0.

When I deploy the same code to Android (using the Android-specific cordova.js file of course) the App will work perfectly.

When I replace the deviceready with a jQuery-ready() the app will load on iOS as well, yet it will then lack access to the device specific APIs.

The cordova.js is loaded as I will see a simple alert message that I put inside of it, yet deviceready never fires and the APIs are never exposed.

My HTMLs head:
```
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> 
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/app.js"></script>
```
My JS:
```
function doStuff(){
//app functionality
}
document.addEventListener('deviceready', doStuff, false);
```
But somehow stuff will only get done on Android...
m90 over 11 years

That seems to be the cause of the issue, thanks. But to be honest I am still a little to puzzled as I don't quite understand why I do need to nest an event handler inside another event handler. The addEventListener method should be available from the start as well as document, shouldn't it? Do you have an explanation for that behavior?
olore over 11 years

did you have a body onload= ? That tripped me up the first time. I agree with you it'd be strange if the double event handler setup was the solution.
m90 over 11 years

No, I didn't have one in the first place as I didn't get the "logic", when using it "somehow" works, yet I went ahead to using the approach that the default project setup uses, see my answer below.
Muhammad Umer over 10 years

i think it goes like this for external files,simulator or all: -phonegap starts -loads whole app -fires device ready event -start running js -assign event -but it's already fired. basically loaded first then ran later which messes up the logic.