CODEWITHSUNDEEP
cordova
Jamesla
Jamesla

Reputation: 1408

Strange phonegap device ready event behaviour

I am trying to get the device ready event to work on the phonegap 3 helloworld default app.

html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

javascript

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');
    alert('welcome!');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
    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);
}
};

This code works ok and will fire my welcome alert when I open the app. However if I comment out either of the lines:

<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>

The welcome alert will no longer fire. What is going on here I have no idea what mechanism phonegap is using to create this kind of behavior?

Upvotes: 2

Views: 5620

Answers (1)

ville
ville

Reputation: 350

The problem here isn't with phonegap, but rather the receivedEvent function causing an error. If you move the alert before the call to receivedEvent, you should see that the deviceready event is still fired properly.

The actual problem is that line

var listeningElement = parentElement.querySelector('.listening');

gets the <p class="event listening">..</p> element from the DOM. Since you remove that element, the listeningElement will be null. Now the call

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

will fail because of that.

Upvotes: 3

Related Questions