在phonegap中的数据库视图

时间:2012-12-27 12:45:52

标签: javascript html sqlite cordova

<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
    var firstNameBox = null;
    var lastNameBox = null;
    var db = null;
    var dataTable = null;
    /** Called when phonegap javascript is loaded */
    function onDeviceReady() {

        var addButton = document.getElementById("add");
        firstNameBox = document.getElementById("firstName");
        lastNameBox = document.getElementById("lastName");
        dataTable = document.getElementById("data-table");

        db = window.openDatabase("scontactDB", "1.0", "Contacts Database", 1000); //name,version,display name, size
        addButton.addEventListener(
            "click",

        function () {
            db.transaction(
            //function sql statements
            function (tx) {
                ensureTableExists(tx);
                var firstName = firstNameBox.value;
                var lastName = lastNameBox.value;

                var sql = 'INSERT INTO Contacts (firstName, lastName) VALUES ("' + firstName + '","' + lastName + '")';
                tx.executeSql(sql);

            },

            function (err) {
                alert("error callback " + err.code);

            },

            function (err) {
                alert("success callback " + err.code);
                loadFromDB();
            });


        },
        false);
        loadFromDB();

    }

    function loadFromDB() {

        db.transaction(

        function (tx) {
            ensureTableExists(tx);
            tx.executeSql('SELECT * FROM Contacts', [],

            function (tx, results) {
                var htmlStr = "";
                for (var index = 0; index < results.rows.length; index++) {
                    var item = results.rows.item(index);
                    htmlStr = htmlStr + "<tr><td>" + item.firstName + "</td><td>" + item.lastName + "</td><td><button onclick=\"deleteEntry('" + item.id + "');\">X</button></td></tr>";

                }
                dataTable.innerHTML = htmlStr;
            },

            function (err) {
                alert("Unable to fetch result from Contacts Table");
            });

        },

        function (err) {
            alert("error callback " + err.code + " " + err.message);

        },

        function () {
            firstNameBox.value = "";
            lastNameBox.value = "";

        });


    }

    function deleteEntry(id) {
        db.transaction(

        function (tx) {
            ensureTableExists(tx);
            tx.executeSql('Delete FROM Contacts where id=' + id);

        },

        function (err) {
            alert("error callback " + err.code + " " + err.message);

        },

        function (err) {
            alert("success callback ");
            loadFromDB();

        });


    }

    function ensureTableExists(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY, firstName,lastName)');

    }
    /** Called when browser load this page*/
    function init() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
</script>
<body onLoad="init()">
    <table border="1">
        <tr>
            <td><b>First Name</b>
            </td>
            <td><b>Last Name</b>
            </td>
            <td><b>Action</b>
            </td>
        </tr>
    </table>
    <table id="data-table"></table>
    <table>
        <tr>
            <td>
                <input id="firstName" type="text">
            </td>
            <td>
                <input id="lastName" type="text">
            </td>
            <td>
                <button id="add">Add</button>
            </td>
        </tr>
    </table>
</body>

我对电话差距完全不满意; 这是我的index.html文件。 我不知道错误在哪里我需要检查值是否已存储到db。请帮忙

1 个答案:

答案 0 :(得分:0)

如果删除此代码行,您的问题将会解决:

<script type="text/javascript" src="phonegap-1.1.0.js"></script>

你应该保持

<script type="text/javascript" src="cordova-2.2.0.js"></script>

您不能使用相同方法的两个类似的js文件。