I build an mobile app hibrid base with phonegap and jquery mobile. My app has a login system, retrieve data from database in server and insert it to sqlite when login succes, so the app can access to the data even it's offline.
i use plugin from litehelpers. And this my sql connect script in database.js:
document.addEventListener("deviceready", connectDB, false);
var kode = JSON.parse(window.localStorage['konfirmasi']);
//create or open Database
function connectDB(){
db = window.sqlitePlugin.openDatabase("konfirmasi", "1.0", "Data Konfirmasi Pengiriman", "1000");
db.transaction(populateDB,successCB,errorCB);
}
//create table and insert some record
function populateDB(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS data_konfirmasi (kode_transaksi text, status text) UNIQUE(kode_transaksi)");
}
//function will be called when an error occurred
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
//function will be called when process succeed
function successCB() {
console.log("Connected to database!");
//db.transaction(queryDB,errorCB);
}
function insertDB(tx){
for (var i = kode.length - 1; i >= 0; i--) {
tx.executeSql("INSERT INTO data_konfirmasi VALUES ("+kode[i]+", 'Belum Terkirim');");
};
}
function queryDB(){
db.transaction(insertDB,errorCB,querySuccess);
}
function querySuccess(){
console.log('Insert query success!');
}
function dropDB(){
db.transaction(dropQuery,errorDrop,successDrop);
}
function dropQuery(tx){
tx.executeSql("DROP TABLE IF EXIST data_konfirmasi");
}
function successDrop(){
console.log('Drop table successful');
}
function errorDrop(err){
console.log('Drop table unsuccessful, Error code: '+err.code);
}
function selectData(err){
db.transaction(selectQuery, errorCB, successQuery)
}
function selectQuery(tx){
tx.executeSql('SELECT * FROM data_konfirmasi',[], querySuccess, errorCB);
}
function querySuccess(tx, results) {
console.log("Returned rows = " + results.rows.length);
// this will be true since it was a select statement and so rowsAffected was 0
if (!results.rowsAffected) {
console.log('No rows affected!');
return false;
}
// for an insert statement, this property will return the ID of the last inserted row
console.log("Last inserted row ID = " + results.insertId);
}
Then, when user login for the first time and success it will retrieve data from server with json, and i want my app to insert retrieved data to sqlite. So, how to put the query for login success only? After that i want to make it DROP table and clear localStorage when it's logout.
This is my login and logout script (main.js):
$(document).on('pageinit','#login',function(){
$(document).on('click','#submit',function(){
if($('#username').val().length>0&&$('#password').val().length>0){
var un = $('#username').val();
var pw = $('#password').val();
$.ajax({
url:'http://qrkonfirmasi.16mb.com/delivery/login.php',
data:{ username : un,
password : pw
},
type:'post',
async:'false',
dataType: 'json',
beforeSend:function(){
$.mobile.loading('show',{theme:"a",text:"Please wait...",textonly:true,textVisible:true});
},
complete:function(){
$.mobile.loading('hide');
},
success:function(result){
console.log(result);
if(result.status==true){
user.name=result.message;
window.localStorage.setItem('konfirmasi', JSON.stringify(result.data));
console.log('Kode: ', JSON.parse(window.localStorage['konfirmasi']));
var kode = JSON.parse(window.localStorage['konfirmasi']);
console.log('Array length: '+kode.length);
queryDB();
console.log('Login berhasil');
$.mobile.changePage("#konfirmasi");
window.localStorage.setItem('uname', un);
window.localStorage.setItem('passwd', pw);
console.log(window.localStorage['uname']);
}else{
alert('Login gagal. Username atau password tidak sesuai');
}
},
error:function(request,error){
alert('Koneksi error. Silahkan coba beberapa saat lagi!');
}
});
}else{
alert('Masukkan username dan password!');
}
return false;
});
});
$(document).on('pagebeforeshow','#konfirmasi',function(){
$.mobile.activePage.find('.welcome').html('<h3>Selamat Datang '+user.name+'</h3>' );
});
$(document).off('click').on('click','#logout',function(){
window.localStorage.clear();
dropDB();
$.mobile.changePage("#home");
});
function exitFromApp(){
navigator.app.exitApp();
}
So, am i at the right way for logout script? I didn't know it works or not because i still cannot try it because the login script still error when i try it with insert query.
Can someone help me make it done, please?
Where are u calling this piece of code from?
function insertDB(tx,val){
for (var i = kode.length - 1; i >= 0; i--) {
tx.executeSql('INSERT INTO konfirmasi VALUES ('+a[i]+');',querySuccess,errorCB);
};
}
If you are calling it from a transaction, then the "val" parameter will not be passed to the insertDB function directly. You might try the following thing:
val = [];
db.transaction(function(tx){
insertDB(tx, val);
}, errorCB);
Moreover, make sure that the stements always run within a db.transaction context
Have fun!
Related
I am working on a phonegap app, and have so far set-up the database to which I have the insert and delete function's working correctly.
I am now struggling on checking input values with the data in the database, so for example for now I am just simply attempting to check if any rows are returned, and if there is that will mean the user and pass entered are in the database, if no rows are returned then the user and pass is false.
I am not getting any errors from the sql statement (function errorCB), as well I did put an debug alert within the function LoginSuccess and that worked, however after removing the debug alert in the LoginSuccess function, I do not get prompted with any alerts and instead the page just refreshes.
I have removed the delete and insert functions from the code as it's relevant to this issue.
Any help will be much appreciated.
document.addEventListener("deviceready", onDeviceReady, false);
var db;
function onDeviceReady() {
db = window.openDatabase("DBkhan", "1.0", "SFDatabase", 2*1024*1024);
db.transaction(createDB, errorCB, successCB);
}
function createDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS mahdi (FirstName text, LastName text, Email text, Password text)');
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
alert("Database Ready");
}
function loginUser()
{
db = window.openDatabase("DBkhan", "1.0", "SFDatabase", 2*1024*1024);
db.transaction(loginDB, errorCB, LoginSuccess);
}
function loginDB(tx)
{
var Username = document.getElementById("username").value;
var Password = document.getElementById("password").value;
tx.executeSql("SELECT * FROM mahdi WHERE FirstName='" + Username + "' AND Password= '" + Password + "'");
} function LoginSuccess(tx, results) {
if (results.rows.length > 0) {
alert ("User and Pass Found");
}
else
{
alert ("User and Pass incorrect");
}
}
Don't worry, all fixed. See below if you'd like to see what I changed around. Seem's as though it was the missing array [] in the executesql statement and calling the renderList (changed from loginSuccessful) into the exectutesql statementent.
function loginDB(tx)
{
alert("yep yep yep");
var Username = document.getElementById("username").value;
var Password = document.getElementById("password").value;
tx.executeSql("SELECT * FROM mahdi WHERE FirstName='" + Username + "' AND Password= '" + Password + "'", [], renderList);
}
function renderList(tx,results) {
if (results.rows.length > 0) {
navigator.notification.alert("User and Pass Found");
}
else
{
navigator.notification.alert("User and Pass incorrect");
}
}
I am using phonegap's database API in my html/css/js code and i have a problem.Although in the index page i manage to create tables,insert data,select and display them,when i proceed to my second html file i can't access anything from the database.I get SQL error 0.Here is my javascript file for the second html page.Any ideas?
var db;
function ondevre (){
alert('a1');
$.ajaxSetup({
crossDomain: true,
xhrFields: {
withCredentials: true
}
});
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
signsql();
function signsql(){
db = window.openDatabase("Database", "1.0", "Cordova Demo", 2*1024*1024);
db.transaction(selectDB, errorCB, successCB);
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
alert("YEAH!!!!");
}
function selectDB (tx) {
myname=escape(window.localStorage["myname"]);
var stre='SELECT User_Mail FROM table1 WHERE User_Name="'+myname+'"';
tx.executeSql(stre, [], mnme, function er(e) {alert("error "+e)});
function mnme (tx,result) {
if (result != null && result.rows != null) {
alert(result.rows.length);
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
};
us_mail=row.User_Mail;
}
}
}
};
}
$("#ii").ready (function () {
$("#whole").fadeIn(2500);
ondevre();
});
app.initialize();
You have likely lost all the plugins - you want to code your app to be a single page app that never as such leaves "index.html" but loads data and page elements into it with Ajax / local templates etc.
i'm getting the error : Uncaught ReferenceError: errorHandler is not defined at file:
what am i doing wrong? source code: http://pastebin.com/3203ynUB
i iniate the first piece with onclick="startBackup()"
it seems to go wrong somewhere in retrieving data from the database, but i cant figure out how and where.
the database is as following
DBName: SmartPassDB
Table name: SmartPass
rows: id , name , nickName , passID , Website
// change to your database
var db = window.openDatabase("Database", "1.0", "SmartPassDB", 5*1024); // 5*1024 is size in bytes
// file fail function
function failFile(error) {
console.log("PhoneGap Plugin: FileSystem: Message: file does not exists, isn't writeable or isn't readable. Error code: " + error.code);
alert('No backup is found, or backup is corrupt.');
}
// start backup (trigger this function with a button or a page load or something)
function startBackup() {
navigator.notification.confirm('Do you want to start the backup? This will wipe your current backup. This action cannot be undone.', onConfirmBackup, 'Backup', 'Start,Cancel');
}
// backup confirmed
function onConfirmBackup(button) {
if(button==1) {
backupContent();
}
}
// backup content
function backupContent() {
db.transaction(
function(transaction) {
transaction.executeSql(
// change this according to your table name
'SELECT * FROM SmartPass;', null,
function (transaction, result) {
if (result.rows.length > 0) {
var tag = '{"items":[';
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
// expand and change this according to your table attributes
tag = tag + '{"id":"' + row.attribute1 + '","name":"' + row.attribute2 + '","nickName":"' + row.attribute3 + '","passId":"' + row.attribute4 + '","website":"' + row.attribute5 + '"}';
if (i+1 < result.rows.length) {
tag = tag + ',';
}
}
tag = tag + ']}';
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
// Change the place where your backup will be written
fileSystem.root.getFile("backup.txt", {create: true, exclusive: false}, function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.write(tag);
}, failFile);
}, failFile);
}, failFile);
alert("Backup done.");
} else {
alert("No content to backup.");
}
},
errorHandler
);
}
);
}
// start restore (trigger this function with a button or a page load or something)
function startRestore() {
navigator.notification.confirm('Do you want to start the restore? This will wipe your current data. This action cannot be undone.', onConfirmRestore, 'Restore', 'Start,Cancel');
}
// restore confirmed
function onConfirmRestore(button) {
if(button==1) {
restoreContent();
}
}
// restore content
function restoreContent() {
db.transaction(
function(transaction) {
transaction.executeSql(
// change this according to your table name
'DELETE FROM SmartPass', startRestoreContent()
);
});
}
// actually start restore content
function startRestoreContent() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
// Change the place where your backup is placed
fileSystem.root.getFile("backup.txt", null, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
var data = JSON.parse(evt.target.result);
var items = data.items;
count = items.length;
db.transaction(
function(transaction) {
$.each(items, function(index, item) {
transaction.executeSql(
// change and expand this according to your table name and attributes
'INSERT INTO SmartPass (id, name, nickName, passId, website) VALUES (?, ?, ?, ?, ?)',
[item.attribute1, item.attribute2, item.attribute3, item.attribute4, item.attribute5],
null
);
});
});
};
reader.readAsText(file);
alert("Restore done.");
}, failFile);
}, failFile);
}, failFile);
}
As per the error
error : Uncaught ReferenceError: errorHandler is not defined at file:
The function errorHandler is not defined in the code.
In your function backupContent() {..} you have used errorHandler as callback reference for the transaction.executeSql() call.
transaction.executeSql(....,errorHandler)
You need to define the errorHandler function.
Also you need to consider a scenario as to how do you handle initial database load. If you run the code for the first time there will not be any tables. The following sql statement will fail.
SELECT * FROM SmartPass;
The table SmartPass is not yet created. That is the most likely reason of the errorHandler being called.
I am creating a mobile application for windows phone 8, iOs android. I'm using windows azure for holding some profile application and some device information. I have very little experience with JavaScript although after banging my head against a brick wall all day its starting to click i think. This being said you'll probably laugh at my code below.
This (below) is the insert statement for a table called Devices.
im trying to do a normal insert if there isn't currently any record for the userId.
If there is already a record then update that record instead.
function insert(item, user, request) {
item.userId = user.userId;
var deviceTable = tables.getTable('Devices');
deviceTable
.where({
userId: user.userId
}).read({
success: function(results) {
if (results.length > 0) {
// Device record was found. Continue normal execution.
deviceTable.where({
userID : user.userId}).update({
//i put this here just because i thought there had to be a response
success: request.respond(statusCodes.OK, 'Text length must be under 10')
}) ;
console.log('updated position ok');
} else {
request.execute();
console.log('Added New Entry',user.userId);
//request.respond(statusCodes.FORBIDDEN, 'You do not have permission to submit orders.');
}
}
});
}
I think you'll want something like this:
function insert(item, user, request) {
item.userId = user.userId;
var deviceTable = tables.getTable('Devices');
deviceTable
.where({
userId: user.userId
}).read({
success: function(results) {
if (results.length > 0) {
//We found a record, update some values in it
results[0].fieldName = X;
//Update it in the DB
deviceTable.update(results[0]);
//Respond to the client
request.respond(200, results[0]);
console.log('updated position ok');
} else {
//Perform the insert in the DB
request.execute();
console.log('Added New Entry',user.userId);
//Reply with 201 (created) and the updated item
request.respond(201, item);
}
}
});
}
I'm currently using phonegap to create and ios app.
While getting familiar to the sql javascript interactions I seem to have created 10 versions of the same named database file.
I'm currently using the following creation code (from the phonegap wiki)
var mydb=false;
// initialise the database
initDB = function() {
try {
if (!window.openDatabase) {
alert('not supported');
} else {
var shortName = 'phonegap';
var version = '1.0';
var displayName = 'PhoneGap Test Database';
var maxSize = 65536; // in bytes
mydb = openDatabase(shortName, version, displayName, maxSize);
}
} catch(e) {
// Error handling code goes here.
if (e == INVALID_STATE_ERR) {
// Version number mismatch.
alert("Invalid database version.");
} else {
alert("Unknown error "+e+".");
}
return;
}
}
// db error handler - prevents the rest of the transaction going ahead on failure
errorHandler = function (transaction, error) {
// returns true to rollback the transaction
return true;
}
// null db data handler
nullDataHandler = function (transaction, results) { }
my problem is that I'm unsure how to check if the database exists before creating it or how to create it only once per device?
and secondly how can i drop all these databases that have been created.
transaction.executeSql('DROP DATABASE phonegap;');
does not seem to drop anything.
Thanks
Please try following code. it is not creating multiple database files, just cross verify by visiting location -/Users/{username}/Library/Application Support/iPhone Simulator/4.3/Applications/{3D5CD3CC-C35B-41B3-BF99-F1E4B048FFFF}/Library/WebKit/Databases/file__0
This is sqlite3 example which cover create, insert, delete and drop queries on Table.
<!DOCTYPE html>
<html>
<body style="font: 75% Lucida Grande, Trebuchet MS">
<div id="content"></div>
<p id="log" style="color: gray"></p>
<script>
document.getElementById('content').innerHTML =
'<h4>Simple to do list</h4>'+
'<ul id="results"></ul><div>Handle Database in Phonegap</div>'+
'<button onclick="newRecord()">new record</button>'+
'<button onclick="createTable()">create table</button>' +
'<button onclick="dropTable()">drop table</button>';
var db;
var log = document.getElementById('log');
db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);
showRecords();
document.getElementById('results').addEventListener('click', function(e) { e.preventDefault(); }, false);
function onError(tx, error) {
log.innerHTML += '<p>' + error.message + '</p>';
}
// select all records and display them
function showRecords() {
document.getElementById('results').innerHTML = '';
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result) {
for (var i = 0, item = null; i < result.rows.length; i++) {
item = result.rows.item(i);
document.getElementById('results').innerHTML +=
'<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', this)">'+
item['id']+' '+item['text'] + '</span> x</li>';
}
});
});
}
function createTable() {
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
function(tx) { log.innerHTML = 'Table1Test created' },
onError);
});
}
// add record with random values
function newRecord() {
var num = Math.round(Math.random() * 10000); // random data
db.transaction(function(tx) {
tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, 'Record:'],
function(tx, result) {
log.innerHTML = 'record added';
showRecords();
},
onError);
});
}
function updateRecord(id, textEl) {
db.transaction(function(tx) {
tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
});
}
function deleteRecord(id) {
db.transaction(function(tx) {
tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id],
function(tx, result) { showRecords() },
onError);
});
}
// delete table from db
function dropTable() {
db.transaction(function(tx) {
tx.executeSql("DROP TABLE Table1Test", [],
function(tx) { showRecords() },
onError);
});
}
</script>
</body>
</html>
And about Droping Database...
Does not seem meaningful for an embedded database engine like SQLite. To create a new database, just do sqlite_open(). To drop a database, simply delete the file.
thanks,
Mayur
Manually deleting the SQLite database from the Library worked for me. Thanks for the precious tip.