I've created the code given at: https://www.youtube.com/watch?v=S0dHH5ijN4k but I'm getting error processing SQL:5 when the "Insert" button is clicked and error processing SQL:0 when "Search" and "Show All" buttons are clicked. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/index.css" />
<body>
<!-- HTML -->
<h1>CRUD Mode On ^^</h1>
<div id="qrpopup" >
<input type="text" id="editNameBox">
<input type="text" id="editNumberBox">
<button onclick="goDelete()">Delete</button>
<button onclick="goEdit()">Edit</button>
<button onclick="document.getElementById('qrpopup').style.display='none';">Discard</button>
</div>
<div>
<input type="text" placeholder="Nama" id="txtName">
<input type="text" placeholder="No." id="txtNumber">
</div>
<div id="tblDiv"></div>
<div style="text-align: center">
<button onclick="goInsert()">Insert</button>
<button onclick="goSearch()">Search</button>
<button onclick="successCB()">Show All</button>
</div>
<!-- JS -->
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>
</body>
</html>
and below is my .js code:
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
var currentRow;
// Populate the database
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id INTEGER PRIMARY KEY AUTOINCREMENT, name,number)');
}
// Query the database
function queryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}
function searchQueryDB(tx) {
tx.executeSql("SELECT * FROM DEMO where name like ('%" + document.getElementById("txtName").value + "%')", [], querySuccess, errorCB);
}
// Query the success callback
function querySuccess(tx, results) {
var tblText = '<table id="t01"><tr><th>ID</th> <th>Nama</th> <th>No.</th></tr>';
var len = results.rows.length;
for (var i = 0; i < len; i++) {
var tmpArgs = results.rows.item(i).id + ",'" + results.rows.item(i).name + "','" + results.rows.item(i).number + "'";
tblText += '<tr onclick="goPopup(' + tmpArgs + ');"><td>' + results.rows.item(i).id + '</td><td>' + results.rows.item(i).name + '</td><td>' + results.rows.item(i).number + '</td></tr>';
}
tblText += "</table>";
document.getElementById("tblDiv").innerHTML = tblText;
}
//Delete query
function deleteRow(tx) {
tx.executeSql('DELETE FROM DEMO WHERE id = ' + currentRow, [], queryDB, errorCB);
}
// Transaction error callback
function errorCB(err) {
alert("Error processing SQL: " + err.code);
}
// Transaction success callback
function successCB() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(queryDB, errorCB);
}
// Cordova is ready
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
//Insert query
function insertDB(tx) {
tx.executeSql('INSERT INTO DEMO (name,number) VALUES ("' + document.getElementById("txtName").value + '","' + document.getElementById("txtNumber").value + '")');
}
function goInsert() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(insertDB, errorCB, successCB);
}
function goSearch() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(searchQueryDB, errorCB);
}
function goDelete() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(deleteRow, errorCB);
document.getElementById('qrpopup').style.display = 'none';
}
//Show the popup after tapping a row in table
function goPopup(row, rowname, rownum) {
currentRow = row;
document.getElementById("qrpopup").style.display = "block";
document.getElementById("editNameBox").value = rowname;
document.getElementById("editNumberBox").value = rownum;
}
function editRow(tx) {
tx.executeSql('UPDATE DEMO SET name ="' + document.getElementById("editNameBox").value +
'", number= "' + document.getElementById("editNumberBox").value + '" WHERE id = ' + currentRow, [], queryDB, errorCB);
}
function goEdit() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(editRow, errorCB);
document.getElementById('qrpopup').style.display = 'none';
}
The application I used is PhoneGap Desktop.
Aucun commentaire:
Enregistrer un commentaire