您好我正在创建一个简单的sqlite cordova应用程序,我安装了sqlite插件并应用了以下代码
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, useremail TEXT)";
var selectAllStatement = "SELECT * FROM Contacts";
var insertStatement = "INSERT INTO Contacts (username, useremail) VALUES (?, ?)";
var updateStatement = "UPDATE Contacts SET username = ?, useremail = ? WHERE id=?";
var deleteStatement = "DELETE FROM Contacts WHERE id=?";
var dropStatement = "DROP TABLE Contacts";
var db = window.sqlitePlugin.openDatabase("AddressBook", "1.0", "Address Book", 200000); // Open SQLite Database
var dataset;
var DataType;
function initDatabase() // Function Call When Page is ready.
{
try {
if (!window.sqlitePlugin.openDatabase) // Check browser is supported SQLite or not.
{
alert('Databases are not supported in this browser.');
}
else {
createTable(); // If supported then call Function for create table in SQLite
}
}
catch (e) {
if (e == 2) {
// Version number mismatch.
alert("Invalid database version.");
} else {
alert("Unknown error " + e + ".");
}
return;
}
}
function createTable() // Function for Create Table in SQLite.
{
db.transaction(function (tx) { tx.executeSql(createStatement, [], showRecords, onError); });
}
function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..
{
var usernametemp = $('input:text[id=username]').val();
var useremailtemp = $('input:text[id=useremail]').val();
db.transaction(function (tx) { tx.executeSql(insertStatement, [usernametemp, useremailtemp], loadAndReset, onError); });
//tx.executeSql(SQL Query Statement,[ Parameters ] , Sucess Result Handler Function, Error Result Handler Function );
}
function deleteRecord(id) // Get id of record . Function Call when Delete Button Click..
{
var iddelete = id.toString();
db.transaction(function (tx) { tx.executeSql(deleteStatement, [id], showRecords, onError); alert("Delete Sucessfully"); });
resetForm();
}
function updateRecord() // Get id of record . Function Call when Delete Button Click..
{
var usernameupdate = $('input:text[id=username]').val().toString();
var useremailupdate = $('input:text[id=useremail]').val().toString();
var useridupdate = $("#id").val();
db.transaction(function (tx) { tx.executeSql(updateStatement, [usernameupdate, useremailupdate, Number(useridupdate)], loadAndReset, onError); });
}
function dropTable() // Function Call when Drop Button Click.. Talbe will be dropped from database.
{
db.transaction(function (tx) { tx.executeSql(dropStatement, [], showRecords, onError); });
resetForm();
initDatabase();
}
function loadRecord(i) // Function for display records which are retrived from database.
{
var item = dataset.item(i);
$("#username").val((item['username']).toString());
$("#useremail").val((item['useremail']).toString());
$("#id").val((item['id']).toString());
}
function resetForm() // Function for reset form input values.
{
$("#username").val("");
$("#useremail").val("");
$("#id").val("");
}
function loadAndReset() //Function for Load and Reset...
{
resetForm();
showRecords()
}
function onError(tx, error) // Function for Hendeling Error...
{
alert(error.message);
}
function showRecords() // Function For Retrive data from Database Display records as list
{
$("#results").html('')
db.transaction(function (tx) {
tx.executeSql(selectAllStatement, [], function (tx, result) {
dataset = result.rows;
for (var i = 0, item = null; i < dataset.length; i++) {
item = dataset.item(i);
var linkeditdelete = '<li>' + item['username'] + ' , ' + item['useremail'] + ' ' + '<a href="#" onclick="loadRecord(' + i + ');">edit</a>' + ' ' +
'<a href="#" onclick="deleteRecord(' + item['id'] + ');">delete</a></li>';
$("#results").append(linkeditdelete);
}
});
});
}
$(document).ready(function () // Call function when page is ready for load..
{
;
$("body").fadeIn(2000); // Fede In Effect when Page Load..
initDatabase();
$("#submitButton").click(insertRecord); // Register Event Listener when button click.
$("#btnUpdate").click(updateRecord);
$("#btnReset").click(resetForm);
$("#btnDrop").click(dropTable);
});
</script>
</head>
<body>
<h1>
Form
</h1>
<form id="mycontact">
<fieldset>
<legend>
Your details
</legend>
<ol>
<li>
<label for="username">
Name
</label>
<input id="username" type="text" placeholder="First and last name" required autofocus pattern="" />
<input type="hidden" id="id" />
</li>
<li>
<label for="useremail">Email</label>
<input id="useremail" type="text" placeholder="example@domain.com" required pattern="" />
</li>
</ol>
</fieldset>
<input type="button" id="btnReset" value="Reset"/>
<input type="button" id="submitButton" value="Save"/>
<input id="btnUpdate" type="button" value="Update"/>
<input id="btnDrop" type="button" value="Drop"/>
</form>
<br />
<div id="results">
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
但是在执行此代码之后,我在控制台中收到错误“index.html:24未捕获的TypeError:无法读取未定义的属性'openDatabase',我真的很困惑我做错了什么,任何人都可以帮我解决这个问题
答案 0 :(得分:0)
该错误明确告诉您,在您尝试进行打开数据库调用时,window.sqlitePlugin
不存在。
首先,您应该确保等到Cordova完成加载,然后通过在Cordova的deviceready
事件中包装您的开放数据库来尝试使用SQLite插件:
var db = null;
document.addEventListener('deviceready', function() {
db = window.sqlitePlugin.openDatabase({name: 'demo.db', location: 'default'});
});
此示例显示在插件文档的顶部: https://github.com/litehelpers/Cordova-sqlite-storage