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>
