CODEWITHSUNDEEP
jqueryweb-sql
Hussain Akbar
Hussain Akbar

Reputation: 686

WebSQL table data not shown in JQuery on page ready

I have a page + script to create a WebSQL database with tables and to populate them with data. On a second page, I try to access the data but it's not there when the page is loading.

$(document).ready(function(){
  db = openDatabase('mydb', '1.0', 'My Data', 2 * 1024 * 1024);
  db.transaction(function(tx){
        tx.executeSql("select username, fullname from currentuser", [], function(tx, results){
            if( results.rows.length > 0 ){
                console.info("Found: " + results.rows.item(0).username);
                return new LoggedInUser(results.rows.item(0).username, results.rows.item(0).fullname);
            }
            return null;
        });
  }
}

When I add a JS breakpoint here and look the the Chrome devtools -> Application tab, it shows me the database name along with the table names. Clicking in each table, the details pane on the right is completely blank.

After the page load event is done and the page is displayed, the application tab refreshes and all data for all tables start being shown.

Update: Debugging the function, I notice behaviour I don't understand: The execution arrow jumps to the db.transaction line, then jumps out of the function. Outside the function the username is printed using console.info as undefined. Execution then jumps to the tx.executeSql line and the Found... line is shown with the expected value. Hmmm... Is a transaction running asynchronously?

Upvotes: 0

Views: 23

Answers (0)

Related Questions