openDatabase Hello World - 2

Posted by cf_PhillipSenn on Stack Overflow See other posts from Stack Overflow or by cf_PhillipSenn
Published on 2010-03-26T20:19:52Z Indexed on 2010/03/26 20:23 UTC
Read the original article Hit count: 279

Filed under:
|

This is a continuation from a previous stackoverflow question. I've renamed some variables so that I can tell what are keywords and what are names that I can control.

Q: Why is the deleteRow function not working?

<html>
<head>
<title>html5 openDatabase Hello World</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.setOnLoadCallback(OnLoadCallback);

function OnLoadCallback() {
    var dbo;
    dbo = openDatabase('HelloWorld');

    dbo.transaction(
      function(T1) {
          T1.executeSql(
              'CREATE TABLE IF NOT EXISTS myTable ' +
              '  (myTableID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
              '   Field1 TEXT NOT NULL );'
          );
      }
    );

    dbo.transaction(function(T2) {
        T2.executeSql('SELECT * FROM myTable',[], function (T6, result) {
          for (var i=0; i < result.rows.length; i++) {
            var row = result.rows.item(i);
            $('#savedData').append('<li id="'+row.myTableID+'">' + row.Field1  + '</li>');
          }
        }, errorHandler);
    });

    $('form').submit(function() {
      var xxx = $('#xxx').val();
      dbo.transaction(
          function(T3) {
              T3.executeSql(
              'INSERT INTO myTable (Field1) VALUES (?);', [xxx], function(){
                    $('#savedData').append('<li id="ThisisWhereIneedHELP">' + xxx  + '</li>');
                     $('#xxx').val('');
              },
              errorHandler
              );
          }
      );
      return false;
    });
    $('#savedData > li').live('click', function (){
        deleteRow(this.id); 
        $(this).remove();
    });
}

function deleteRow(myTableID) {
    alert('trying to delete');
    dbo.transaction(function(T4) {
        T4.executeSql('DELETE FROM myTable WHERE myTableID = ?', [myTableID], function(){
            alert('Deleted!');
        }, errorHandler);
    });
}

function errorHandler(T5, error) {
    alert('Oops. Error was '+error.message+' (Code '+error.code+')');
    // T5.executeSql('INSERT INTO errors (code, message) VALUES (?, ?);',
    // [error.code, error.message]);
    return false;
}
</script>
</head>
<body>
<form method="post">
    <input name="xxx" id="xxx" />
    <p>
    <input type="submit" name="OK" />
    </p>
    <ul id="savedData">
    </ul>
</form>
</body>
</html>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript