我是Cordova的新手。我正在使用Cordova(Android)创建一个小应用程序。我使用SQLite作为本地数据库,并在其中创建了数据库和表,但是当我尝试检索详细信息时,它不是工作
我做了什么:
我正在尝试从表格权重中检索数据。
这是我的weight.html:
!DOCTYPE html>
<html>
<head>
<title></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>
这是我的WeightInfo.html:
<!DOCTYPE html>
<html>
<head>
<title></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>
这是我的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);
}
最后这是我的weightScript.js:
function redirect(){
window.open("HomePage.html",'_self');
};
function redirect1(){
window.open("WeightInfo.html",'_self');
};
当我运行时,正在创建代码表并且数据也会被插入,但数据不会显示。 我的LogCat显示以下内容:
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
请建议如何从表格权重中检索数据并将其显示在文本区域或表格中。 提前致谢