Phonegap/Jquery mobile Read an XML into a database and then display the data in a div

Question

I am looking to access the information that I have stored in the databse that Ive parsed out of an XML. I am using phonegap (cordova 2.2.0). I am calling queryDB() on click on my navigation bar to call the function to populate the div with the information that was parsed from an XML. My issues is that the information is not being displayed.

Anyone have any idea why? Below is my code:

On click

<a href="#acceptedOrders" onclick("queryDB();")> <img src="Images/acceptedOrders.gif" width="25%"> </a>

This is a javascript function that reads an XML into a databse:

var db = openDatabase('PhoneGap_db', '1.0', '', 2 * 1024 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS orders (id unique, city, state, zip)');
});


db.transaction(function (tx) {
   tx.executeSql('INSERT INTO orders (id, city, state, zip) VALUES (orderId,city,state,zip)');
});

$.ajax({
    type: "GET",
    url: "testOrders.xml",
    dataType: "xml",
    success: function(xml) {
      $(xml).find('order').each(function(){
        orderId = $(this).find("orderId").text();
        city = $(this).find("city").text();
        state = $(this).find("state").text();
        zip = $(this).find("zip").text();
        db.transaction(function (tx) {
           tx.executeSql('INSERT INTO orders (id, city, state, zip) VALUES ('+ orderId +', '+ city + ', ' + state + ', ' + zip + ')');
        });
            });
        }
     }); 

Here is my Read Script(not working)

function queryDB(tx) {
  tx.executeSql('SELECT orderId FROM orders', [], querySuccess, errorCB);
}
function querySuccess(tx, results) {
  var len = results.rows.length;
  for (var i=0; i<len; i++){
      $('#acceptedOrdersContent').append('<li><a href="#CompleteOrderInfo">'+results.rows.item(i).orderId+'</a></li>').listview("refresh");
  }
};
function errorCB(err) {
  console.log("Error processing SQL: "+err.code);
}

This is an example XML file:

    <?xml version="1.0" encoding="UTF-8"?>
     <orders>
        <order>
         <orderId>123456789</orderId>
         <city>Cincinnati</city>
         <state>Ohio</state>
        <zip>45451</zip>
    </order>
 </orders> 

Thanks everyone!

Answer 1

First of all, your html is wrong, you should use onclick="" instead of onclick(""), like this:

<a href="#acceptedOrders" onclick="queryDB();">
  <img src="Images/acceptedOrders.gif" width="25%">
</a>

Also your queryDB functions is expecting a parameter that's not being passed. You should update it to something like this:

function queryDB() {
  db.transaction(function (tx) {
    tx.executeSql('SELECT orderId FROM orders', [], querySuccess, errorCB);
  });
}

Keep in mind that this should be in the same context where db object was created