First go through the code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>Embedded Sql Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></ script>
<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
<!-- main scripts used in this example -->
<script type="text/javascript" charset="utf-8">
// global variables
var db;
var shortName = 'WebSqlDB';
var version = '1.0';
var displayName = 'WebSqlDB';
var maxSize = 65535;
// this is called when an error happens in a transaction
function errorHandler(transaction, error) {
alert("Error: "+ error.message + "code: " + error.code);
}
// this is called when a successful transaction happens
function successCallBack() {
alert("DEBUGGING: success");
}
function nullHandler(){}
// called when the application loads
function onBodyLoad(){
// This alert is used to make sure the application is loaded correctly
alert("DEBUGGING: we are in the onBodyLoad() function");
if (!window.openDatabase) {
alert("Databases are not supported in this browser.");
return;
}
db = window.openDatabase(shortName, version, displayName,maxSize);
db.transaction(function(tx){
tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)', [],nullHandler,errorHandler);
},errorHandler,successCallBack);
}
function ListDBValues() {
if (!window.openDatabase) {
alert("Databases are not supported in this browser.");
return;
}
$('#lbUsers').html('');
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM User;', [],
function(transaction, result) {
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
$('#lbUsers').append("<br>" + row.UserId + ". " + row.FirstName+ " " + row.LastName);
}
}
},errorHandler);
},errorHandler,nullHandler);
return;
}
function AddValueToDB() {
if (!window.openDatabase) {
alert("Databases are not supported in this browser.");
return;
}
db.transaction(function(transaction) {
transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler);
});
ListDBValues();
return false;
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>WebSQL</h1>
<input id="txFirstName" type="text" placeholder="FirstName">
<input id="txLastName" type="text" placeholder="Last Name"><br>
<input type="button" value="Add record" onClick="AddValueToDB()"> <br>
<input type="button" value="Refresh" onClick="ListDBValues()"> <br>
<br>
<span style="font-weight:bold;">Currently stored values:</span>
<span id="lbUsers"></span>
</body>
</html>
I am working on a phonegap app and I am creating it on android os.I am getting
"Can't find variable: $ at file:///android_asset/www/dbDemo.html:103"
line due to error occurred at 103
$('#lbUsers').html('');
and
"Can't find variable: $ at file:///android_asset/www/dbDemo.html:131"
line due to error occurred at 131
transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler);
while running the the above code.Help me to get rid of the problem.Any help would be highly appreciated.Thanx in advance.
It does look like jQuery isn’t loading. I’m looking at your code and I think the problem could be as simple as an extra space…
There’s a space up there in the closing script tag – Try changing it from
</ script>to</script>