Problem in fetching data from SQLite database and displaying it as list

Problem in fetching data from SQLite database and displaying it as list

Hello!

I am new to jQuery Mobile. I am trying to fill a list with "li" items by fetching records from SQLite database. The problem that I am facing is that all items are displayed as a single "li". Below image shows what I am getting



And I should be getting is



The code that I have written is

  1. var strItems = "";
  2.    
  3.         var query = "SELECT id, name FROM categories WHERE ID IN (1, 2, 3)";
  4.         try
  5.         {
  6.             initDB();
  7.             //fillCategories();
  8.             localDB.transaction(function(transaction){               
  9.             transaction.executeSql(query, [], function(transaction, results){
  10.                 for (var i = 0; i < results.rows.length; i++) {                       
  11.                     var row = results.rows.item(i);                                                                                                               
  12.                     var categoryId = row['id'];
  13.                     var categoryName = row['name'];
  14.                    
  15.                     if(i == 0)
  16.                         strItems = "<li data-theme=c><a href=#page1?id=" + categoryId + " data-transition=slide>" + categoryName + "</a></li>";                           
  17.                     else
  18.                         strItems += "<li data-theme=c><a href=#page1?id=" + categoryId + " data-transition=slide>" + categoryName + "</a></li>";                           
  19.                 }               
  20.                 $("ul").html(strItems);
  21.             }, null);                             
  22.             });
  23.         }
  24.         catch (e) {
  25.             document.write("Error: Unable to select data from the db " + e + ".");
  26.         }       

Please tell me where am I making a mistake.