Spent hours but couldn’t find what is the problem with the code.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
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("<li>Length: " + results.rows.length + "</li>");
for (var i=0; i<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 = "<li>" + _term + "</li>";
$(".addedQueries").append(newH);
}
$(function () {
initDatabase();
});
$(document).ready(function () {
$(".addBtn").click(function () {
var _term = $("#query").val();
addToHistoryUI(_term);
saveDB(_term);
loadDB();
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div class="panel">
<input id="query" type="text" name="query" />
<a class="navigationLink addBtn" href="#">add</a>
</div>
<div class="content">
<ul class="addedQueries">
</ul>
</div>
<ul class="debugger"></ul>
</div>
</body>
</html>
In your saveDB() method it looks like you are trying to use double quotes in your WHERE clause. Am I right about that?
Double quotes don’t fly in SQL.
I am not sure why your SELECT would not be working. Please post the error message.
UPDATE: You’re INSERT is also failing because you have a typo.
You have INTO sampleTable(_term), but you don;t have a column called _term, the column name is term (with no underscore). I made that change and the inserts now happen.
You also had some other minor stuff. This seems to do what you want.