使用sqlite和cordova创建CRUD操作时遇到问题

时间:2016-12-06 13:04:19

标签: javascript sqlite cordova

您好我正在创建一个简单的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',我真的很困惑我做错了什么,任何人都可以帮我解决这个问题

1 个答案:

答案 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