Database Using Phonegap

Database Using Phonegap

Hi

I am testing SQLite database using phonegap and everything seems to work fine except appending the final resultset to the division with id=output. It returns 2 in the alert statement but the actual table is not displayed.

Any help please?

 

<!DOCTYPE html>
<html>
  <head>
    <title>Contact Example</title>

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
 function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }    

    // Populate the database   
    function populateDB(tx) {  
        tx.executeSql('DROP TABLE IF EXISTS DEMO');
        tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');  
    }

    // Query the database  
    function queryDB(tx) {
        tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
    }

    // Query the success callback
    function querySuccess(tx, results) {
        var len = results.rows.length;      
  var st="<table>";   
        for (var i=0; i<len; i++){
   st += "<tr><td>" + i + "</td></tr>";
   st += "<tr><td>" + results.rows.item(i).id + "</td></tr>";
   st += "<tr><td>" + results.rows.item(i).data + "</td></tr>";           
        }
  st += "</table>";
  alert("Len = " + len);
  $("#output").append(st);
    }

    // Transaction error callback   
    function errorCB(err) {
        console.log("Error processing SQL: "+err.code);
    }

    // Transaction success callback   
    function successCB() {
        var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 2000);
        db.transaction(queryDB, errorCB);
    }

    // PhoneGap is ready
    function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 2000);  
        db.transaction(populateDB, errorCB, successCB);
    }
    </script>
 </head>
 <body onload="onLoad()">
    <h1>Example1</h1>
    <div id="output">
    </div>
  </body>
</html>