Phonegap - deviceready not being fired

Question

This code shows (i.e. alerts) "alert1" but not "alert2". I'm using a Samsung Galaxy Tab 3 7.0 as target device. The following code is in index.js.

EDIT: "alert3" is neither shown - for those who get dazed about javascript contexts and closures.

var app = {
    bootStrap: function() {
        //code here does not run
        window.alert("alert2");
        //document.body.style.backgroundColor = "blue";
    },
    initialize: function() {
        var current = this;
        //code here runs
        window.alert("alert1");
        document.addEventListener("deviceready", function(){
            //code inside this anonymous function neither runs
            window.alert("alert3");
            current.bootStrap();
        }, false);
    }
};

The initialize method is being called:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <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/platform.css" />
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script type="text/javascript" src="js/angular-resource.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <title>1001Carros</title>
    </head>
    <body>
        <script type="text/javascript">
            app.initialize();
        </script>
        <div id="log">
            <button id="clickme" value="Click Me"></button>
            pantalla principal
        </div>
    </body>
</html>

Question: why? (also tried commenting and changing the background color to blue but neither line was executed at all).

Have you tried `app.bootStrap()` or `this.bootStrap()` instead of `current.bootStrap()` ? — Dawson Loudon, Jul 07 '14 at 19:26
`this.bootStrap()`? is it serious? 1. Does not work (yes, I left it as mistake), 2. since the anonymous function is passed by reference to the event handling, `this` does not exist or will not have the expected context (i.e. `this` will not be `app`). 3. Do you know what `this` means in javascript (since you're offering it as an alternative to `current`)? I'm missing a basic about Phonegap, perhaps, but u're missing even a lot of javascript lexical scopes and contexts. Read http://stackoverflow.com/questions/346015/javascript-closures-and-this-context for an example problem. — Luis Masuelli, Jul 07 '14 at 19:36
Even worse: code written inside the same anonymous function (but above `current.bootStrap()`) is neither being executed. — Luis Masuelli, Jul 07 '14 at 19:41
@luis Masuelli. Cool bro!!!. Dawson was just offering a suggestion. If he would knew he would have put it in the Answer section. Anyway **this** won't work because it will most probably refer to the **event** object. — frank, Jul 07 '14 at 19:41
I know, that's why i'm not using `this` in the closure. But `app.initialize()` is being run directly (i.e. as a line - not as a callback), so app == this in the context of the (initialize) function (using app neither works). See the html code and you'll get how's being executed. — Luis Masuelli, Jul 07 '14 at 19:44

frank · Accepted Answer · 2014-07-07T20:51:11.797

I tried your code in cordova 3.4.x and it worked without any issues in the emulator.
I have included cordova.js in my index.html file. I can see that you have include phonegap.js. Not sure if that is the issue.

Are you testing on a real (Samsung Galaxy Tab 3 7.0) device or the Android emulator.?
which version of phonegap are you developing for?

You can try to remove all the closure code and test the code has below

document.addEventListener("deviceready", function(){
            //code inside this anonymous function neither runs
            window.alert("alert3");
        }, false);
}

If the above code does not work than it means that the "deviceready" event is not getting fired.

You could try to create a custom event and check whether it works as shown below.

initialize: function() {
        var current = this;
        //code here runs
        window.alert("alert1");
        var event = new Event('myevent');
        document.addEventListener("myevent", function(){
            //code inside this anonymous function neither runs
            window.alert("My Event!");
            current.bootStrap();
        }, false);
        document.dispatchEvent(event);
}

The issue was indeed that. I have both command lines installed (I installed phonegap first and then I installed cordova, which supports more caps -e.g. --release and merges-). What I forgot to change is the phonegap.js reference to cordova.js (since I changed the command line). Lucky of me I used the right tag (cordova) for the question!!! — Luis Masuelli, Jul 07 '14 at 21:05

Phonegap - deviceready not being fired

1 Answers1