· 10 years ago · Aug 30, 2016, 05:04 AM
1function errorHandler(transaction, error) {
2 alert('Error: ' + error.message + ' code: ' + error.code);
3
4 }
5
6 function successCallBack() {
7 alert("DEBUGGING: success");
8
9 }
10
11 function nullHandler(){};
12
13 function onBodyLoad(){
14
15 alert("DEBUGGING: we are in the onBodyLoad() function");
16
17 if (!window.openDatabase) {
18
19 alert('Databases are not supported in this browser.');
20 return;
21 }
22
23
24 db = openDatabase(shortName, version, displayName,maxSize);
25
26
27 db.transaction(function(tx){
28
29
30 //tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);
31
32
33 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);
34
35 }
36
37 function ListDBValues() {
38
39 if (!window.openDatabase) {
40 alert('Databases are not supported in this browser.');
41 return;
42 }
43
44
45 $('#lbUsers').html('');
46
47
48 db.transaction(function(transaction) {
49 transaction.executeSql('SELECT * FROM User;', [],
50 function(transaction, result) {
51 if (result != null && result.rows != null) {
52 for (var i = 0; i < result.rows.length; i++) {
53 var row = result.rows.item(i);
54 $('#lbUsers').append('<br>' + row.UserId + '. ' + row.FirstName+ ' ' + row.LastName);} } },errorHandler); },errorHandler,nullHandler);
55
56 return;
57
58 }
59
60
61 function AddValueToDB() {
62
63 if (!window.openDatabase) {
64 alert('Databases are not supported in this browser.');
65 return;
66 }
67
68 db.transaction(function(transaction) {
69 transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()], nullHandler,errorHandler); });
70
71
72 ListDBValues();
73
74 return false;
75
76 }
77
78<body onLoad="onBodyLoad()">
79<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
80 <input id="txFirstName" type="text" placeholder="FirstName">
81 <input id="txLastName" type="text" placeholder="Last Name">
82 <input type="button" value="Add record" onClick="AddValueToDB()">
83 <input type="button" value="Refresh" onClick="ListDBValues()"> <br>
84 <br>
85 <span style="font-weight:bold;">Currently stored values:</span>
86 <span id="lbUsers"></span>
87</body>