-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathjqm_websql.html
147 lines (120 loc) · 4.93 KB
/
jqm_websql.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Short example on using WebSQL with jquery mobile - last updated: Sep 2012">
<meta name="author" content="Ido Green">
<title>WebSQL with JQM</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
// Add a new todo item
function addTodo() {
var todo = document.getElementById("todo");
var task = {
"id": new Date().getTime(),
"text": todo.value };
database.transaction(function(tx) {
tx.executeSql('INSERT INTO tasks (id, text) values (?, ?)', [task.id, task.text]);
});
// now let clean it to the next todo
todo.value = "";
showAll();
}
// not efficiate way but simple for our needs
function showAll() {
document.getElementById("todoItems").innerHTML = "" ;
database.transaction(function(tx) {
tx.executeSql('SELECT * FROM tasks', [], function (tx, results) {
var len = results.rows.length
for (var i = 0; i < len; i++) {
var li = document.createElement("li");
var t = document.createTextNode(results.rows.item(i).text);
var a = document.createElement("a");
a.textContent = " [Delete]";
a.setAttribute('data-key', results.rows.item(i).id);
a.setAttribute('data-val', results.rows.item(i).text);
a.setAttribute("href", "#");
a.setAttribute("data-iconpos", "notext");
a.setAttribute("data-role", "button");
a.setAttribute("data-icon", "delete");
a.setAttribute("data-inline", "true");
a.addEventListener("click", function() {
deleteTodo(this.getAttribute("data-key"),this.getAttribute("data-val") );
}, false);
li.appendChild(a);
li.appendChild(t);
document.getElementById("todoItems").appendChild(li);
$("#todoItems").trigger('create');
}
});
});
}
function deleteTodo(id, text) {
if (confirm("Are you sure you want to Delete "+ text +"?")) {
database.transaction(function(tx) {
tx.executeSql('DELETE FROM tasks WHERE id=?', [id]);
});
showAll();
}
}
function cleanAll() {
if (confirm("Are you sure you want to delete all Todos?")) {
database.transaction(function(tx) {
tx.executeSql('DROP TABLE IF EXISTS tasks', [])
showAll();
});
}
}
function initDB() {
database = openDatabase('todos1', '1.0', 'todos with jqm example', 2*1024*1024);
if (database) {
database.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS tasks (id REAL UNIQUE, text TEXT)", []);
});
}
}
// start the party
$(document).bind('pageinit', function() {
console.log("-- lets start the party --");
initDB();
showAll();
$("#addItem").click(function() {
addTodo();
});
$("#cleanAll").click(function() {
cleanAll();
})
});
</script></head>
<body>
<div data-role="page">
<div data-role="header">
<h1>WebSQL with JQM</h1>
<a href="#" data-icon="delete" id="cleanAll">Clear DB</a>
</div>
<!-- /header -->
<div data-role="content">
<p>
This is a short example of webSQL with jQueryMobile on a todo list app. Please open Chrome DevTools and/or FireBug in order to see all the log message and understand what is the process. This example will work great on both iOS (mobile safari) and Android (Chrome for android and the Android browser).
</p>
<ul id="todoItems" data-role="listview" data-inset="true" data-filter="true"></ul>
<input type="text" id="todo" name="todo" placeholder="What do you need to do?"/>
<input id ="addItem" type="submit" value="Add Todo Item" />
</div>
<!-- /content -->
<div data-role="footer">
<p>
<div data-role="controlgroup" data-type="horizontal">
<a href="http://greenido.wordpress.com" data-role="button">Ido's blog</a>
<a href="http://www.w3.org/TR/webdatabase/" data-role="button">WebSQL Deprecated spec on w3c</a>
<a href="https://github.com/greenido/WebSQL-to-WebSQL-example" data-role="button">WebSQL to IndexedDB example on github</a>
</div>
</p>
</div>
<!-- /footer --> </div>
<!-- /page -->
</body>
</html>