Hi Guys
HTML5 database are asynchronous.
You can't call transactions for select statements in the same thread as creating the database tables.
The tables may not be created yet.
So the following will casue errors in v6 devices.
tx.executeSql("CREATE TABLE IF NOT EXISTS userdata (key int unique, value text)");
tx.executeSql("SELECT value FROM userdata WHERE key = ?", [1], function (tx, results) {
if (results.rows.length == 1) {
document.getElementById("storageField").value = results.rows.item(0).value;
}
else {
tx.executeSql("INSERT INTO userdata (key, value) VALUES (?, ?)", [1, ""]);
}
alert("loaded");
});
You need to call the select on the callback of the creation of tables.
You also need to handle database errors.
e.g.
As an example of async and callbacks check this out
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<!-- path to the script files changed for codepresentation -->
<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<script type="text/javascript">
var db = null;
function setupData() {
alert('am setting it up!');
try {
db = openDatabase("TestDB", '1.0', 'Test', 50 * 1024);
// db = new Database("TestDB"); // fails with the mentioned exception (not defined)
if (db) {
db.transaction(function(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS userdata (key int unique, value text)", [],DataHandler,errorHandler);
},
tx_errorHandler
,
tx_DB_Select
);
}
else {
document.getElementById("txt").value += "\r\nNo DB\r\nopenDatabase:\r\n" + openDatabase;
}
}
catch (err) {
document.getElementById("txt").value += err;
}
}
function errorHandler(transaction, error){
try {
alert('errorHandler-message:' + error.message + '. code:' + error.code + '.');
}
catch(e){
alert('errorHandler-error:' + e.message + '.');
}
}
function DataHandler(transaction, results){
try {
if (results.rows.length == 1) {
document.getElementById("storageField").value = results.rows.item(0).value;
}
else {
//tx.executeSql("INSERT INTO userdata (key, value) VALUES (?, ?)", [1, ""]);
}
alert("loaded");
}
catch(e){
alert('DataHandler-error:' + e.message + '.');
}
}
function tx_errorHandler(error){
try {
alert('tx_errorHandler-message:' + error.message + '. code:' + error.code + '.');
}
catch(e){
alert('tx_errorHandler-error:' + e.message + '.');
}
}
function tx_DB_Select(){
try {
db.transaction(function(tx){
tx.executeSql("SELECT value FROM userdata WHERE key = ?", [1],DataHandler,errorHandler);
},
tx_errorHandler
,
tx_DataHandler
);
}
catch(e){
alert('tx_DB_Select-error:' + e.message + '.');
}
}
function tx_DataHandler(){
try {
}
catch(e){
alert('tx_DataHandler-error:' + e.message + '.');
}
}
function store()
{
if (!db)
{
alert("No DB!");
return;
}
var data = document.getElementById("storageField").value;
db.transaction(function (tx) {
tx.executeSql("UPDATE userdata SET value = ? WHERE key = ? ", [data, 1]);
});
}
</script>
</head>
<body onload="setupData()">
<div>
<input type="text" id="storageField" /><input type="button" value="Store" onclick="store();" />
<br />
<textarea style="width: 100%;" rows="10" id="txt"></textarea>
</div>
</body>
</html>
Cheers
Andrew
button below the post(s)
So only solution is to wait for fix or go the java route.
