openDatabase Hello World
I'm trying to learn about openDatabase, and I think I'm getting it to INSERT INTO TABLE1, but I can't verify that the SELECT * FROM TABLE1 is working.
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript">
var db;
$(function(){
db = openDatabase('HelloWorld');
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS Table1 ' +
' (TableID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
' Field1 TEXT NOT NULL );'
);
}
);
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM Table1;',function (transaction, result) {
for (var i=0; i < result.rows.length; i++) {
alert('1');
$('body').append(result.rows.item(i));
}
},
errorHandler
);
}
);
$('form').submit(function() {
var xxx = $('#xxx').val();
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO Table1 (Field1) VALUES (?);', [xxx], function(){
alert('Saved!');
},
errorHandler
);
}
);
return false;
});
});
function errorHandler(transaction, error) {
alert('Oops. Error was '+error.message+' (Code '+error.code+')');
transaction.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>
<a href="http://www.google.com">Cancel</a>
</form>
</body>
</html>
Answer
You're almost there, there are only two things:
- The if you want to use the SQL statement callback, you should supply to the
executeSqlmethod the parameters array argument, even if your query doesn't need any param. - You should get a field to show in your loop,
result.rows.item(i)is an object that contains properties as your table fields.
Your select will work like this:
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM Table1',[], function (trx, result) {
for (var i=0; i < result.rows.length; i++) {
$('body').append(result.rows.item(i).Field1); // <-- getting Field1 value
}
}, errorHandler);
});
Check your example here.