View The Retrieved Data from webSQL Database in list

View The Retrieved Data from webSQL Database in list

I want to view the database data in <li> format and actually the data are names of picture I want to view. Here's the javascript database code

  2. var createStatement = "CREATE TABLE IF NOT EXISTS batikPattern (id INTEGER PRIMARY KEY AUTOINCREMENT, originalPattern TEXT, outlinePattern TEXT)";
  3.  
  4. var selectAllStatement = "SELECT * FROM batikPattern";
  5.  
  6. var dropStatement = "DROP TABLE batikPattern";
  7.  
  8.  var db = openDatabase("BatiQu", "1.0", "Address Book", 200000);  // Open SQLite Database
  9.  
  10. var dataset;
  11.  
  12. var DataType;
  13.  
  14.  function initDatabase()  // Function Call When Page is ready.
  15.  
  16. {
  17.  
  18.     try {
  19.  
  20.         if (!window.openDatabase)  // Check browser is supported SQLite or not.
  21.  
  22.         {
  23.  
  24.             alert('Databases are not supported in this browser.');
  25.  
  26.         }
  27.  
  28.         else {
  29.  
  30.             createTable();  // If supported then call Function for create table in SQLite
  31.  
  32.         }
  33.  
  34.     }
  35.  
  36.     catch (e) {
  37.  
  38.         if (e == 2) {
  39.  
  40.             // Version number mismatch. 
  41.  
  42.             console.log("Invalid database version.");
  43.  
  44.         } else {
  45.  
  46.             console.log("Unknown error " + e + ".");
  47.  
  48.         }
  49.  
  50.         return;
  51.  
  52.     }
  53.  
  54. }
  55.  
  56. function createTable()  // Function for Create Table in SQLite.
  57.  
  58. {
  59.   db.transaction(populateDB, errorCB, successCB);
  60.    // db.transaction(function (tx) { tx.executeSql(createStatement, [], showRecords, onError); });
  61.  
  62. }
  63.  
  64.   function populateDB(tx) {
  65.    tx.executeSql('DROP TABLE IF EXISTS batikPattern');
  66.         tx.executeSql(createStatement, []);
  67.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik1", "outlineBatik1")');
  68.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik2", "outlineBatik2")');
  69.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik3", "outlineBatik3")');
  70.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik4", "outlineBatik4")');
  71.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik5", "outlineBatik5")');
  72.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik6", "outlineBatik6")');
  73.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik7", "outlineBatik7")');
  74.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik8", "outlineBatik8")');
  75.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik9", "outlineBatik9")');
  76.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik10", "outlineBatik10")');
  77.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik11", "outlineBatik11")');
  78.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik12", "outlineBatik12")');
  79.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik13", "outlineBatik13")');
  80.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik14", "outlineBatik14")');
  81.         tx.executeSql('INSERT INTO batikPattern(originalPattern,outlinePattern) VALUES ("batik15", "outlineBatik15")');
  82.     
  83. }
  84.  
  85.     //function will be called when an error occurred
  86.     function errorCB(err) {
  87.       //  alert("Error processing SQL: "+err.code);
  88.     }
  89.  
  90.     //function will be called when process succeed
  91.     function successCB() {
  93.      //   alert("success!");
  94.         db.transaction(queryDB,errorCB);
  95.     }
  96.  
  97.  
  98.  
  99.  function queryDB(tx){
  100.         tx.executeSql('SELECT * FROM batikPattern',[],querySuccess,errorCB);
  101.     }
  102.  
  103.  function querySuccess(tx,result){
  104.         $('#batikPic').empty();
  105.         $.each(result.rows,function(index){
  106.             var row = result.rows.item(index);
  107.             $('#batikPic').append('<li><img src="images/Real-Pattern/'+row['originalPattern']+'.jpg"/></li>');
  108.  });
  109.   $('#batikPic').listview();
  110.  
  111.     }
  115.  
  116. function onError(tx, error) // Function for Hendeling Error...
  117.  
  118. {
  119.  
  120.     alert(error.message);
  121.  
  122. }
  123.  
  124.  
  125. $(document).ready(function () // Call function when page is ready for load..
  126.  
  127. {
  128.  
  129.     initDatabase();

  131.  
  132. });
  133.  
The Bold text is where I sense the problem comes from

and the HTML section for that is 
  2. <div class="frame" id="basic">
  3. <ul class="clearfix" id="batikPic">
  4.  
  6. </ul>
  7. </div>
Anyone knows what seems to be the problem here? When I inspect the element using google chrome the error says something like "Index must be in numbers". Thanks in advance