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
| <!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; 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>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript"></script>
var db;
var ShortName = 'WebSqlDB';
var version = '2.0 ';
var displayName = 'WebSqlDB ';
var maxSize = 65535;
function errorHandler(transaction, error) {
alert('Error: ' + error.message + ' code: ' + error.code);
}
function successCallBack() {
alert("DEBUGGING: success");
}
function nullHandler(){};
// called when the application loads
function onBodyLoad(){
alert("DEBUGGING: we are in the onBodyLoad() function");
if (!window.openDatabase) {
alert('Databases are not supported in this browser.');
return;
}
db = openDatabase(shortName, version, displayName,maxSize);
db.transaction(function(tx){
tx.executeSql('DROP TABLE IF EXISTS User',nullHandler,nullHandler);
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;
}
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>WebSQL</h1>
</div>
<div data-role="content" id="mainContent">
<input id="txFirstName" type="text" placeholder="FirstName">
<input id="txLastName" type="text" placeholder="Last Name">
<input type="button" value="Add record" onClick="AddValueToDB()">
<input type="button" value="Refresh" onClick="ListDBValues()">
<span style="font-weight:bold;">Currently stored values:</span>
<span id="lbUsers"></span>
</div>
<div data-role="footer" class="ui-bar">
</div>
</div>
</body>
</html> |
Partager