I have been trying to setup a sql lite database for my application but I can not make it work for some reason, here's my code. What i'm doing wrong here? has phonegap changed recently? I watched a couple of tutorials and most people did it with a similar way and it seems to work.
<!DOCTYPE html>
<script src="js/custom.js"> </script>
<script src="http://ift.tt/1UratRT"></script>
<script src="http://ift.tt/1OE6QAJ"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
var db;
function onDeviceReady() {
db = window.openDatabase("Database", "1.0", "Cordova Demo", 2*1024*1024);
db.transaction(createDB, errorCB, successCB);
}
function createDB(tx) {
//tx.executeSql('DROP TABLE IF EXISTS DEMO');
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (title, image, description)');
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
alert("YEAH!!!!");
}
function insertDB(tx) {
var _title = $("[name='title']").val();
var _image = $("[name='image']").val();
var _description = $("[name='description']").val();
var sql = 'INSERT INTO DEMO (title, image, description) VALUES (?,?,?)';
tx.executeSql(sql, [_title,_image,_description], sucessQueryDB, errorCB);
}
function sucessQueryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], renderList, errorCB);
}
function renderList(tx,results) {
var htmlstring = '';
var len = results.rows.length;
for (var i=0; i<len; i++){
htmlstring += '<li>' + results.rows.item(i).title + '</li>';
}
$('#resultList').html(htmlstring);
$('#resultList').listview('refresh');
}
function submitForm() {
db.transaction(insertDB, errorCB);
$.mobile.changePage( "#page2", { reverse: false, transition: "slide" } );
return false;
}
</script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<div data-role="page" id="page1" >
<div data-role="header" >
<h1>FORM</h1>
</div>
<div data-role="content">
<form method="POST" onsubmit="return submitForm()" id="myForm" data-ajax="false">
<lable for="title" class="ui-hidden-accessible">Title</lable><input type="text" name="title" placeholder="Title"><br>
<input type="text" name="description" placeholder="description">
<input type="submit" value="submit">
</form>
</div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header" >
<h1>Page Two</h1>
</div>
<div data-role="content">
<div id="output">
</div>
<ul data-role="listview" id="resultList">
</ul>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire