onDeviceReady function not called

0
votes

I'm working my way through my first phonegap tutorial but I'm having problems.

  1. I've set that the onDeviceReady() function be called when the "deviceready" event is fired, but the method is never called.

  2. I tried calling the App.start() method directly, but I get an error in the console that the APP.start() method doesn't exist.

Thanks for your help!

The code for Index.html and App.js is below:

Index.html

<!DOCTYPE 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" />
    <script type="text/javascript" charset="utf-8"
    src="cordova/cordova-2.2.0-android.js"></script>
    <script type="text/javascript" charset="utf-8"
    src="framework/utility.js"></script>
    <script type="text/javascript" charset="utf-8"
    src="app.js"></script>
    <link rel="stylesheet" href="framework/base.css" type="text/css" />
    <link rel="stylesheet" href="style/style.css" type="text/css" />
    <title>Chapter 1 App: Quiz Time</title>
</head>
<body>
    <div class="container" id="rootContainer">
    </div>
    <div id="preventClicks"></div>
</body>
</html>

app.js

document.addEventListener("load",function(){

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

    function onDeviceReady() {
        alert("WOAH!");
        start();
    }

    start = function() {
        PKUTIL.include([ "framework/ui-core.js", "framework/device.js" ],
                function() {
                    init();
                });
    }

    init = function() {
        PKUI.CORE.initializeApplication();
        PKUTIL.loadHTML("views/gameView.html", {
            id : "gameView",
            className : "container",
            attachTo : $ge("rootContainer"),
            aSync : true
        }, function(success) {
            if (success) {
                gameView.initializeView();
            }
        });

        PKUTIL.loadHTML("views/endView.html", {
            id : "endView",
            className : "container",
            attachTo : $ge("rootContainer"),
            aSync : true
        }, function(success) {
            if (success) {
                endView.initializeView();
            }
        });

        PKUTIL.loadHTML("views/startView.html", {
            id : "startView",
            className : "container",
            attachTo : $ge("rootContainer"),
            aSync : true
        }, function(success) {
            if (success) {
                startView.initializeView();
                PKUI.CORE.showView(startView);
            }
        });
    }

UPDATE:

  • Changed type="application/javascript" to `type="text/javascript"'

  • add deviceready listener in load listener.

  • Still no luck!

4
androidcordova

4 Answers

0
votes

Replace your tags with:

<script type="text/javascript" ...

using a application/javascript mime type isn't the standard approach.

Check your code for syntax errors (run it in Safari, or Chrome etc with the console open to see them). I find that when things don't work in PhoneGap it's usually because a JS error has crept in somewhere.

Remove all the scripts except the thing you're trying to test (lines to set the deviceready event, and the function it runs), then introduce each block of code and script one-by-one to see when it stops. That way you can isolate the block of code that is causing the problem.

0
votes

I have experienced a similar problem myself. I will try to offer whatever advice I can.

First up, If you look at the Phonegaps Device Ready documentation, it notes that Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded.. The reason for this, if you look at the source code, is that they're actually overriding document.addEventListener with their own function which handles all bindings of deviceready.

I found myself that when I was loading phonegap dynamically, if I would add my event listener for devicereadybefore it had hooked in, it would never come, but if I waited until the script element was loaded, it worked fine. Usually if you're just working with <script> tags directly, they actually load synchronously, so this isn't an issue. It's possible that having the scripts in the body element might cause them to load in a non-synchronous fashion, so I'd probably try moving them to the head or just above the </html>, and try changing to a more standard script element, like Henry suggests.

<script type="text/javascript" src="cordova/cordova-2.2.0-android.js"></script>
<script type="text/javascript" src="framework/utility.js"></script>
<script type="text/javascript" src="app.js"></script>
0
votes

Your js should be like this

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

function onDeviceReady() {
    alert("WOAH!");
    start();
}

function start() {
    PKUTIL.include([ "framework/ui-core.js", "framework/device.js" ],
            function() {
                init();
            });
}

When your js is load, and cordova ready, your function onDeviceReady will be executed. This function will do an alert and then call the function start.

0
votes

Try to change 

$$(document).on('deviceready', function() {
    // Your content here
    });

For 

  $$(document).on('DOMContentLoaded', function(){
     // Your content here
    });