Question

关注如何将SQLite与PhoneGap / Cordova一起使用this tutorial。我复制粘贴代码并修复了间距，然而，在花了很多时间试图让它工作之后，我仍然难倒。

起初我认为sql语句有一两个错误，这就是为什么我没有得到任何结果。但是，进一步检查时，即使按下某些按钮的onclick方法，也没有执行简单的警报语句。 Body的onload方法也没有被执行。

这是我的HTML文件：

<!DOCTYPE html>
<html>
    <head>

    <meta http-equiv="Content-type" name="viewport" content="width=default-width; user-scalable=no" />

    <title>Embedded Sql Example</title>

    <!-- include the next line to use phonegap javascript functions -->
    <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>

    <!-- include the next line to use jquery functions in your application
    you must download this and include the directory your html file is in
    -->
    <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>

    <!-- main scripts used in this example -->
    <script type="text/javascript" charset="utf-8" src="js/gitScript.js"></script>


</head>

<body onload="onBodyLoad();">
    <h1>WebSQL</h1>
    <input id="txFirstName" type="text" placeholder="FirstName">
    <input id="txLastName" type="text" placeholder="Last Name">

    <input type="button" value="Add record" onclick="AddValueToDB();">
    <input type="button" value="Refresh" onclick="ListDBValues();"> 

    <br><br>

    <span style="font-weight:bold;">Currently stored values:</span>
    <span id="lbUsers"></span>
</body>
</html>

我有一个名为js的文件夹，其中包含我使用的所有JavaScript文件。这是gitScript.js文件：

// global variables
var db;
var shortName = "WebSqlDB";
var version = "1.0";
var displayName = "WebSqlDB";
var maxSize = 65535;

// this is called when an error happens in a transaction
function errorHandler(transaction, error) {
    alert("Error: " + error.message + " code: " + error.code);
}

// this is called when a successful transaction happens
function successCallBack() {
   alert("DEBUGGING: success");
}

function nullHandler(){};

// called when the application loads
function onBodyLoad(){

    // This alert is used to make sure the application is loaded correctly
    // you can comment this out once you have the application working
    alert("DEBUGGING: we are in the onBodyLoad() function");

    if (!window.openDatabase) {
        // not all mobile devices support databases  if it does not, the
        // following alert will display
        // indicating the device will not be albe to run this application
        alert("Databases are not supported in this browser.");
        return;
    }

    // this line tries to open the database base locally on the device
    // if it does not exist, it will create it and return a database
    // object stored in variable db
    db = openDatabase(shortName, version, displayName,maxSize);

    // this line will try to create the table User in the database just created/openned
    db.transaction(function(tx){

        tx.executeSql( "CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)", [],nullHandler,errorHandler);
    },errorHandler,successCallBack);

}

// list the values in the database to the screen using jquery to
// update the #lbUsers element
function ListDBValues() {
    if (!window.openDatabase) {
        alert("Databases are not supported in this browser.");
        return;
    }

    // this line clears out any content in the #lbUsers element on the
    // page so that the next few lines will show updated
    // content and not just keep repeating lines
    $('#lbUsers').html('');

    // this next section will select all the content from the User table
    // and then go through it row by row
    // appending the UserId  FirstName  LastName to the  #lbUsers element
    // on the page
    db.transaction(function(transaction) {
        transaction.executeSql("SELECT * FROM User;", [],
            function(transaction, result) {
                if (result != null && result.rows != null) {
                    for (var i = 0; i < result.rows.length; i++) {
                        var row = result.rows.item(i);
                        $('#lbUsers').append('<br>' + row.UserId + '. ' + row.FirstName+ ' ' + row.LastName);
                    }
                }
            },errorHandler);
    },errorHandler,nullHandler);

    return;

}

// this is the function that puts values into the database using the
// values from the text boxes on the screen
function AddValueToDB() {

    alert("Add Value to DB entered");
    if (!window.openDatabase) {
        alert("Databases are not supported in this browser.");
        return;
    }

    // this is the section that actually inserts the values into the User table
    db.transaction(function(transaction) {
        transaction.executeSql('INSERT INTO User(FirstName, LastName)
            VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],
            nullHandler,errorHandler);
    });

    db.transaction(function(transaction) {
        transaction.executeSql('INSERT INTO User(FirstName, LastName)
            VALUES (?,?)',["FirstName", "LastName"],
            nullHandler,errorHandler);
    });


    // this calls the function that will show what is in the User table in the database
    ListDBValues();

    return false; 
}

我真的不知道它有什么问题。我已经用another SQLite PhoneGap tutorial仔细检查了它，我很难看到上面代码出错的地方。

我有一种感觉我错过了一些基本的东西，因为我必须使用JavaScript并且第一次使用HTML5已经很长时间了。

Answer 1

问题是JavaScript文件中存在错误。我通过链接另一个JavaScript文件来解决这个问题，而html文件可以很好地看到第二个JavaScript文件中的函数。我使用Chrome调试器找出错误的位置，这些错误完全是针对不同的问题。

此外，似乎使用phonegap.js和cordova.js没有区别。

HTML5 / JavaScript / PhoneGap onclick无法正常运行

1 个答案: