phonegap jquerymobile - load a page when asynchronous stuff is done

Question

i want to load an external page (so without using ajax from query mobile), the problem is that when i use a function activated by a click on a link tag , and in this function i have an INSERT into a database, the link is followed BEFORE the script writes into the DB..

here's a portion of the code:

$('#aggiungiClienteRubrica').click(function() {

                               db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
                               db.transaction(function(tx){
                                              var sql = 'INSERT INTO CLIENTI (nome, cognome) VALUES ("'+$('#nome').val()+'", "'+$('#cognome').val()+'")';
                                              tx.executeSql(sql)}, errorCB);
                               });

and in the html file i just have an tag like this:

<a id="aggiungiClienteRubrica" href="../client/consultClients.html" data-role="button" data-theme="b" rel="external">Add client</a>

so the problem is that, i can exec the javascript, but asyncronous call that INSERTs into db the record is not executed and the ../client/consultClients.html page is loaded

How can i make it follow the link AFTER job is done??

Tim Croydon · Answer 1 · 2012-12-04T13:26:05.580

0

Try this:


$('#aggiungiClienteRubrica').click(function(e) {
    e.preventDefault(); // will stop default link action

    // capture the link url
    var url = $(this).attr('href');

    // your DB stuff here, wait for completion
    // (I'm not familiar with local DB so don't know that part)

    // use this if you managed to do the above synchronously
    // or in a 'success' callback
    window.location.href = url;
});

edited Dec 04 '12 at 13:26

answered Dec 04 '12 at 09:15

Tim Croydon

1,866
1
19
30

Well, link is followed but DB is not updated, i was trying some stuff like that as suggested in other similar topics, but didnt get it to work yet... – Gianluca Dec 04 '12 at 09:31
Have a look at this question: http://stackoverflow.com/questions/3903155/synchronous-query-to-web-sql-database – Tim Croydon Dec 04 '12 at 09:54
Wow i just discovered a whole new world, closures.. i need to study it cause 1 hour ago i didnt even know it existed.. btw, if anyone is willing to throw in some code as a closure example it would be appreciated! – Gianluca Dec 04 '12 at 11:54
Without looking at the documentation myself I don't know how to pass the callback for the executeSql call but I've updated my code to show how you can capture the link href. You can just use the `url` variable within your callback. Note you couldn't use the `$(this)` as the scope will be different within your closure. – Tim Croydon Dec 04 '12 at 13:28

score 0 · Accepted Answer · answered Dec 04 '12 at 16:59

Ok, made it working!!!

here's how:

$('#aggiungiClienteRubrica').click(function(e) {
                               var myVar = click(e);
                               myVar;
});

then click function is defined like this:

function click(e){

db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
e.preventDefault();
db.transaction(function(tx){
               var sql = 'INSERT INTO CLIENTI (nome, cognome) VALUES ("'+$('#nome').val()+'", "'+$('#cognome').val()+'")';
               tx.executeSql(sql)}, errorCB, successCreation);
}

and then, the callback function successCreation is defined:

function successCreation(){
var href = $('#aggiungiClienteRubrica').attr('href');
window.location.href = href;

}

Ty Tim for your support...

phonegap jquerymobile - load a page when asynchronous stuff is done

2 Answers2