title: HTML5 database issue while saving or selecting
body: <p>Spent hours but couldn't find what is the problem with the code. </p>
  
  <p>The code simply creates a table if not exits and adds the text that typed in a textbox. On every load it loads these and writes to a list.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var mydb = null;
  
          function initDatabase() {
              try {
                  if (!window.openDatabase) {
                      alert('Databases are not supported in this browser.');
                  } else {
                      var shortName = 'mydb';
                      var version = '1.0';
                      var displayName = 'sample db';
                      var maxSize = 1024*1024*2;
                      mydb = openDatabase(shortName, version, displayName, maxSize, null);
  
                      mydb.transaction(
                          function (transaction) {
                              transaction.executeSql('CREATE TABLE IF NOT EXISTS sampletable(term TEXT NOT NULL);', [], nullDataHandler, errorHandler);
                          }
                      );
  
                      loadDB();
                  }
              } catch(e) {
                  if (e == 2) {
                      alert("Invalid database version.");
                  } else {
                      alert("Unknown error "+e+".");
                  }
                  return;
              }
          }
  
          function loadDB() {
              $(".debugger").html("");
  
              mydb.transaction(
                  function (t) {
                      t.executeSql("SELECT * FROM sampletable", [],dataSelectHandler,errorHandler);
                  }
              );
          }
  
          function saveDB(_term) {
              mydb.transaction(
                  function (transaction) {
                      transaction.executeSql("INSERT INTO sampletable(_term) VALUES (\""+_term + "\");");
                  }
              );
          }
  
          function dataSelectHandler(transaction, results){
              $(".debugger").append("&lt;li&gt;Length: " + results.rows.length + "&lt;/li&gt;");
  
              for (var i=0; i&lt;results.rows.length; i++)
              {
                  var row = results.rows.item(i);         
                  addToHistoryUI(row['_term']);
              }
          }
  
          function errorHandler(transaction, error){
              if (error.code==1){
                  alert("DB Table already exists");
              } else {
                  // Error is a human-readable string.
                  alert('Oops.  Error was '+error.message+' (Code '+error.code+')');
              }
              return false;
          }
  
  
          function nullDataHandler(){
              //alert("SQL Query Succeeded");
          }
  
          function addToHistoryUI(_term)
          {
              var newH = "&lt;li&gt;" + _term + "&lt;/li&gt;";
              $(".addedQueries").append(newH);
          }
  
          $(function () {
              initDatabase();
          });
  
          $(document).ready(function () {
              $(".addBtn").click(function () {      
                  var _term = $("#query").val();
  
                  addToHistoryUI(_term);                  
                  saveDB(_term);
  
                  loadDB();
              });
          });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" id="index"&gt;
          &lt;div class="panel"&gt;
                  &lt;input id="query" type="text" name="query" /&gt;
                  &lt;a class="navigationLink addBtn" href="#"&gt;add&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="content"&gt;
                  &lt;ul class="addedQueries"&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;ul class="debugger"&gt;&lt;/ul&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>