Question

I am having an issue with a project I am working on using phonegap

[Step 1] –
I am storing a users login “session” locally (Web SQL) from a web server. This is working fine, I can successfully connect to the web server, post the user login data, get a response from the server, create the local User database and store the user “session” value

[Step 2] – I then need to pass this “session” value back to the web server, and receive response data from the server. Again, this works as expected but the problem is, the callback function is being executed twice.

Step 2 is called when the user taps a button on the screen, and it doesn’t seem like the reason that Step 2 is being called twice if because phonegap is picking up the tap more than once, I have tried:

$(".yes_sync").live("tap", function(){
    console.log("tap!");
    ...

Which only logs a single tap event.

When the user taps I am calling:

var db = window.openDatabase("MVIdb", "1.0", "MVIsqlite", 200000);
db.transaction(getUserId, getUserIdFailed, getUserIdsSuccess);

The getUserId, getUserIdFailed and getUserIdsSuccess functions look like so:

function getUserId(tx){
    tx.executeSql("SELECT * FROM user WHERE id = '1'", [], getUserIdsSuccess,     getUserIdFailed);
}

function getUserIdFailed(tx, results){
    console.log("Error retrieving user session ID");
}

function getUserIdsSuccess(tx, results){
    console.log("Success retrieving user session ID");
    if(typeof results != 'undefined'){
        var return_value = results.rows.item(0).user_id; 
        user_session_id = return_value;
        var token = $.md5(user_session_id+"whatever!");

        $.get('http://localhost/project/dummyserver/sync?user_id=' + user_session_id + '&token=' + token, function(data) {  
            data = $.parseJSON(data);       
            for (var key in data){
                console.log(data[key]['user_id']);
            }

            $(".ui-loader").fadeOut();
            jQuery.mobile.changePage("_sync_complete.html", {  role: "dialog", transition: "pop" } );
        });
    }
}

As you can see, the last line in the callback for the $.get in the callback for the success opens a pop up dialogue. This dialogue is being called twice.

I have noticed that phonegap has a lot of asynchronous behaviour, which I understand is to prevent the system from feeling “laggy”, but surely it shouldn’t be executing a callback function on a db.transaction more than once?

Answer 1

Not the most elegant solution, but I went with using a global variable

var has_getUserIdsSuccess = false;

And in the callback function:

if(typeof results != 'undefined'){
    if (has_getUserIdsSuccess == false){ 
        has_getUserIdsSuccess = true;
        // as per above
        has_getUserIdsSuccess = false;  // set it back to false so use can press the execute this function again later
    }

I am still interested to see if anyone has a better solution!