0

Can't seem to figure out why this works in Safari but not in chrome. Any help would be much appreciated.

//Create or use existing DB
var db = openDatabase('myTest', '1.0', 'mySpecialDatabase', 200000);

if (db) {
  //New Transaction
  db.transaction(function (tx) {
  tx.executeSql('DROP TABLE IF EXISTS foo');    
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  //Insert test data
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "myTest")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (2, "another")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (3, "andYetAnother")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (4, "ohAndAgain")');
    });
    alert("DB success");     
 }
else {
    alert("Oooops");
}

db.transaction(function (tx) {
    // Loop rows of DB, print values
    tx.executeSql('SELECT * FROM foo',[], function (tx, results) {
        var rows = results.rows;
        alert(rows.length);
        for (var index = 0; index < rows.length; index++) {
            var x = rows.item(index);
            alert(x.text);
        }
    });
});

Throw it in JSFiddle in either browser, works as intended in latest release of Safari but no such luck in chrome.

EDIT

I managed to get it working in the end - code can be seen below.

var db = openDatabase('CBDB', '1.0', 'mySpecialDatabaseThatWontWork',10*1024*1024);

db.transaction(function (tx){
 tx.executeSql('DROP TABLE IF EXISTS cb');
 alert("dropped table");
 createDB();
 queryDB();
},
function (tx, error) {
    // error
    alert('0.Something went wrong: '+ error.message);
});

function createDB(){
    db.transaction(function (tx) {       
        tx.executeSql('CREATE TABLE IF NOT EXISTS cb (id unique, text)');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (1, "myTest")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (2, "another")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (3, "andYetAnother")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (4, "ohAndAgain")');
        alert("DB success");  
        },
        function (tx, error) {
            // error
            alert('1.Something went wrong: '+ error.message);
        });
}

function queryDB(){
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM cb',[], function (tx, results) {
            var rows = results.rows;
            alert(rows.length);
            for (var index = 0; index < rows.length; index++) {
                var x = rows.item(index);
                alert(x.text);
            } 
        },
        function (tx, error) {
        // error
        alert('2.Something went wrong: '+ error.message);
        });
    });
}

2 Answers 2

0

Updated the code slightly, and this now works..

var db = openDatabase('CBDB', '1.0', 'mySpecialDatabaseThatWontWork',10*1024*1024);

db.transaction(function (tx){
 tx.executeSql('DROP TABLE IF EXISTS cb');
 alert("dropped table");
 createDB();
 queryDB();
},
function (tx, error) {
    // error
    alert('0.Something went wrong: '+ error.message);
});

function createDB(){
    db.transaction(function (tx) {       
        tx.executeSql('CREATE TABLE IF NOT EXISTS cb (id unique, text)');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (1, "myTest")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (2, "another")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (3, "andYetAnother")');
        tx.executeSql('INSERT INTO cb (id, text) VALUES (4, "ohAndAgain")');
        alert("DB success");  
        },
        function (tx, error) {
            // error
            alert('1.Something went wrong: '+ error.message);
        });
}

function queryDB(){
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM cb',[], function (tx, results) {
            var rows = results.rows;
            alert(rows.length);
            for (var index = 0; index < rows.length; index++) {
                var x = rows.item(index);
                alert(x.text);
            } 
        },
        function (tx, error) {
        // error
        alert('2.Something went wrong: '+ error.message);
        });
    });
}
0

The problem is that rather like an AJAX request, Chrome performs its database transactions (as coded) asynchronously. i.e. the data doesn't exist yet when it starts executing the query. This code should work:

//Create or use existing DB
var db = openDatabase('myTest', '1.0', 'mySpecialDatabase', 200000);

if (db) {
  //New Transaction
  db.transaction(function (tx) {
  tx.executeSql('DROP TABLE IF EXISTS foo');    
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
  //Insert test data
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "myTest")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (2, "another")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (3, "andYetAnother")');
  tx.executeSql('INSERT INTO foo (id, text) VALUES (4, "ohAndAgain")');
    });
    alert("DB success");     
    doQuery(); // call query only after database load is complete

 }
else {
    alert("Oooops");
}

function doQuery(){
  db.transaction(function (tx) {
      // Loop rows of DB, print values
      tx.executeSql('SELECT * FROM foo',[], function (tx, results) {
          var rows = results.rows;
          alert(rows.length);
          for (var index = 0; index < rows.length; index++) {
              var x = rows.item(index);
              alert(x.text);
          }
      });
  });
}

It is possible to have synchronous database access (c.f. HTML5 Database API : Synchronous request) but this is also not straightforward.

1
  • Hey man! Nice job, yeah I got there in the end. Thanks for this though.
    – Julio
    Dec 21, 2010 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.