I am new to Cordova.I am creating a small app using Cordova(Android).I am using SQLite as local database and have created the DB and tables in it,but when i am trying to retrieve the details it is not working. WHAT I HAVE DONE:
I am trying to retrieve data from table weight. This is my weight.html:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="weightScript.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.4.3.min.js"></script>
</head>
<body bgcolor="black">
<script>
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
// Now safe to use the Cordova API
alert('device ready');
var db = window.openDatabase("Database2", "1.0", "DigitalNoiz", 200000);
db.transaction(queryDB, errorCB, successCB);
}
function queryDB(tx) {
tx.executeSql("SELECT * FROM Weight",[], successCB, errorCB);
alert('in queryDB');
}
function successCB(tx, results) {
alert(' Weight details Retrieved successfully');
document.getElementById("output").innerHTML = "";
var len = results.rows.length;
console.log("Returned rows = " + results.rows.length);
// loop through rows as many times as there are row results
for (var i = 0; i < len; i++) {
var weight = results.rows.item(i).Weight;
// Display the query results within <textarea id="output"></textarea>
document.getElementById("output").innerHTML += "\nWeight = " + results.rows.item(i).Weight +
"\nHeight = " + results.rows.item(i).Height +
"\nNotes= " + results.rows.item(i).Notes +
"\nDateAndTime = " + results.rows.item(i).DateAndTime + "\n";
} }
// Transaction error callback
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
</script>
<h1><font color="#FFF">Weight</font></h1>
<p><font color="#FFF">This area is for you to keep track of height,weight and BMI Records,for instance if you are trying to loose weight.The BMI will automatically calculate the height and weight you enter</font></p>
<font color="#FFF"><input type="submit" align="center" value="EnterRecord" onclick="redirect1()"/></font> <font color="#FFF"><input type="submit" onclick="redirect()" align="center" value="HomePage" /></font>
<table style="width:100%;background-color: #BEF781;">
<tr><th colspan="6" style="background-color: #00BFFF;height:50px;font-size: larger;"><font color="white">Weight</font></th></tr>
<tr></tr>
<tr style="background-color: #58D3F7;"><td>height</td><td>weight</td><td>Notes</td><td>Date and Time</td></tr>
<tr><td>30.7cm</td><td>50</td><td>20</td><td>10-3-2014 05:00 00</td></tr>
</table>
<textarea id="output" rows="15" placeholder="Results displayed here"></textarea>
</body>
</html>
**And this is my WeightInfo.html:**
<!DOCTYPE html>
<html>
<head>
<title>Notification Prompt Dialog Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="weightInfoScript.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.4.3.min.js"></script>
</head>
<body bgcolor="black">
<script type="text/javascript">
function redirect(){
window.open("Weight.html",'_self');
};
</script>
<div class="container">
<section id="content">
<form action="">
<h1><font color="#FFF">Weight Info</font></h1>
<table>
<tr><td><font color="#FFF">Height</font></td><td><input type="text" placeholder="Height" required="" id="Height" /></td></tr>
<tr><td><font color="#FFF">Weight</font></td><td><input type="text" placeholder="Weight" required="" id="Weight" /></td></tr>
<tr><td><font color="#FFF">Notes</font></td><td><input type="text" placeholder="Notes" required="" id="Notes" /></td></tr>
<tr><td><font color="#FFF">DateAndTime</font></td><td><input type="date" placeholder="DateAndTime" required="" id="DateAndTime" style="width:175px;"/></td></tr>
</table>
<table><tr><td><input type="submit" id="submit" value="Save"/></td><td><input type="submit" value="Cancel" onclick="redirect()"/></td><tr></table>
</form><!-- form -->
</section><!-- content -->
</div><!-- container -->
</body>
</html>
**And this is my WeightInfoScript.js:**
window.addEventListener('load', function(){
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
}, false);
// PhoneGap is ready
function onDeviceReady() {
var db = window.openDatabase("Database2", "1.0", "DigitalNoiz", 200000);
var submitBtn = $("#submit");
submitBtn.click(function(){
db.transaction(populateDB, errorCB, successCB);
});
}
// Populate the database
function populateDB(tx) {
var setHeight =$("#Height");
var setWeight =$("#Weight");
var setNotes =$("#Notes");
var setDateAndTime=$("#DateAndTime");
tx.executeSql('DROP TABLE IF EXISTS Weight');
tx.executeSql('CREATE TABLE IF NOT EXISTS Weight (Height integer(20), Weight integer(20), Notes varchar(20), DateAndTime text)');
tx.executeSql('INSERT INTO Weight (Height,Weight,Notes,DateAndTime) VALUES ("' + setHeight.val() + '", "' + setWeight.val() + '", "' + setNotes.val() + '", "' + setDateAndTime.val() + '")');
queryDB(tx);
}
// Query the database
function queryDB(tx) {
tx.executeSql("SELECT * FROM Weight", [], successCB, errorCB);
}
// Transaction error callback
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
// Transaction success callback
function successCB(tx, results) {
alert('Weight details submitted successfully');
window.open("Weight.html",'_self');
// Display the query results as a table within <div id="output2"></div>
//document.getElementById("output2").innerHTML += "<table><tr><td><button class='buttonDel' onclick='delRecord(\"" + rowid + "\")' value='Delete'>Delete</button><br>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).data1 + "</td><td>" + results.rows.item(i).data2 + "</td><td>" + results.rows.item(i).data3 + "</td></tr></table>";
//console.log("rowid = " + rowid);
location.reload(false);
}
**And finally this is my weightScript.js:**
function redirect(){
window.open("HomePage.html",'_self');
};
function redirect1(){
window.open("WeightInfo.html",'_self');
};
When i run the code tables are being created and data is also getting inserted but the data is not getting displayed. My LogCat shows the following:
07-31 00:53:39.370: D/CordovaLog(2167): file:///android_asset/www/Weight.html: Line 33 : Uncaught TypeError: Cannot read property 'rows' of undefined
Kindly suggest how to retrieve the data from the table weight and display it in a text area or table. Thanks in advance
0 comments:
Post a Comment