Question

Please excuse me if this is something simple I am overlooking. I am making my first foray into app development using the PhoneGap/Cordova platform, I appear to be stuck at the first hurdle. My deviceReady listener doesn’t appear to be firing.

My code looks like so:

alert('0');

document.addEventListener("deviceready", function(){
    alert('1');
    db = window.openDatabase("testproject", "1.0", "PhoneGap Test", 200000);
    alert('2');
    if (dbCreated){
        alert('3');
        db.transaction(getData, transaction_error);
    } else {
        alert('4');
        db.transaction(populateDB, transaction_error, populateDB_success);
    }
}, false);

the initial alert('0') (put in to make sure I am actually connecting to the file) is firing but nothing else is happening.

In another post on here. Someone else with a similar problem was promted to try document.addEventListener("deviceready", deviceReadyFunction, true) which solved the issue for them, but not for me.

As a side question, how do you go about debugging javascript and inspecting the clientside databases in PhoneGap development? When developing for the web I obviously have firebug and many other tools, however with PhoneGap dev relying heavily on deviceready which is not triggered by a browser are there any tools I should be aware of? (I am writing my code in Coda but compiling from Xcode).

Answer 1

I have together the code and it works fine, i have tested using Cordova 1.7 and Android 2.2

    var dbCreated = false;
    document.addEventListener("deviceready",
            function() {
                alert('1');
                db = window.openDatabase("testproject", "1.0", "PhoneGap Test",
                        200000);
                alert('2');
                if (dbCreated) {
                    alert('3');
                    db.transaction(getData, transaction_error);
                } else {
                    alert('4');
                    db.transaction(populateDB, transaction_error,
                            populateDB_success);
                }
            }, false);

    function getData() {

    }

    function transaction_error() {

    }

    function populateDB(tx) {

    }

    function populateDB_success() {

    }

Full source code – https://gist.github.com/3064728

For debugging, use weinre it is a really good tool to debug javascript applications on mobile devices.

http://people.apache.org/~pmuellr/weinre/docs/latest/

PhoneGap is also using it via – debug.phonegap.com