1

我正在 jquery-mobile 框架的帮助下构建一个 PhoneGap iOS 应用程序。我有一个主要的 jquery-mobile 自动划分列表，由 SQL 数据库填充。这个自动划分的列表按预期工作。单击此动态列表的一个链接时，应该会启动一个动态页面，其中包含同一 SQL 数据库中包含的一些额外详细信息。但是，当数据库不加载页面详细信息时。

我通过一些脚本更改成功地在 jquerymobile 框架之外完成了这项工作。但我真的需要来自 jquerymobile 的 autodividers 功能。

首先我假设这个动态页面在 DOM 之外，但是在 mobileinit() 中添加以下函数并不能解决我的 SQL 加载问题：

$( 'fooddetails.html?id' ).live( 'pagebeforecreate',function(event, ui){
                                     alert( 'This page was just inserted into the dom!' );
                                     });

下面是我的数据库的完整脚本和触发额外详细信息页面的动态 URL：

var db;
var dbCreated = false;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    db = window.openDatabase("FoodDirectoryDB", "1.0", "PhoneGap", 200000);
    if (dbCreated)
        db.transaction(getAlimentaries, transaction_error);
    else
        db.transaction(populateDB, transaction_error, populateDB_success);
}

function transaction_error(tx, error) {
    $('#busy').hide();
    alert("Database Error: " + error);
}

function populateDB_success() {
    dbCreated = true;
    db.transaction(getAlimentaries, transaction_error);
}

function getAlimentaries(tx) {
    var sql = "select e.id, e.foodName, e.groupfoodName, e.quantity, e.picture, count(r.id) reportCount " + 
                "from food e left join food r on r.managerId = e.id " +
                "group by e.id order by e.foodName ";
    tx.executeSql(sql, [], getAlimentaries_success);
}

function getAlimentaries_success(tx, results) {
    $('#busy').hide();
    $('#foodList li').remove();
    var len = results.rows.length;
    for (var i=0; i<len; i++) {
        var food = results.rows.item(i);
        console.log(food.foodName);

        $('#foodList').append('<li><a href="fooddetails.html?id=' + food.id + '">' +
                '<img src="pics/' + food.picture + '" class="arrow-r"/>' +
                '<p class="line1">' + food.foodName + '</p>' +
                '</a></li>');

        $( 'employeedetails.html?id' ).live( 'pageshow',function(event, ui){
                                            alert( 'This page was just inserted into the dom!' );
                                            });

    }
    $('#foodList').listview('refresh');
    db = null;
}

function populateDB(tx) {
    $('#busy').show();
    tx.executeSql('DROP TABLE IF EXISTS food');
    var sql = 
        "CREATE TABLE IF NOT EXISTS food ( "+
        "id INTEGER PRIMARY KEY AUTOINCREMENT, " +
        "foodName VARCHAR(50), " +
        "groupfoodName VARCHAR(50), " +
        "quantity VARCHAR(50), " +
        "portion VARCHAR(50), " + 
        "managerId INTEGER, " +
        "glucides VARCHAR(30), " + 
        "picture VARCHAR(200))";
    tx.executeSql(sql);


    tx.executeSql("INSERT INTO food (id,foodName,groupfoodName,managerId,quantity,portion,glucides,picture) VALUES (1,'Abricot','Fruits frais et fruits secs',1,'1 abricot','65g','5','fruits_legumes.png')");
    tx.executeSql("INSERT INTO food (id,foodName,groupfoodName,managerId,quantity,portion,glucides,picture) VALUES (2,'Abricots secs','Fruits frais et fruits secs',1,'4 abricots secs','80g','30','fruits_legumes.png')");

我还尝试将 data-ajax="false" rel"external" 添加到此动态链接，但不幸的是这并没有改变，我读到动态链接中的这些属性未经授权：

$('#foodList').append('<li><a href="fooddetails.html?id=' + food.id + '">' +

以下是未正确加载的详情动态页面的脚本：

    var id = getUrlVars()["id"];
var db;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    console.log("opening database");
    db = window.openDatabase("FoodDirectoryDB", "1.0", "PhoneGap", 200000);
    console.log("database opened");
    db.transaction(getAlimentary, transaction_error);

}

function transaction_error(tx, error) {
    $('#busy').hide();
    alert("Database Error: " + error);
}

function getAlimentary(tx) {
    $('#busy').show();
    var sql = "select e.id, e.foodName, e.groupfoodName, e.managerId, e.quantity, e.portion, e.glucides, " +
                "e.picture, m.foodName managerFirstName, m.groupfoodName managerLastName, count(r.id) reportCount " +
                "from food e left join food r on r.managerId = e.id left join food m on e.managerId = m.id " +
                "where e.id=:id group by e.groupfoodName order by e.groupfoodName, e.foodName";
    tx.executeSql(sql, [id], getAlimentary_success);
}

function getAlimentary_success(tx, results) {
    $('#busy').hide();
     $('#foodList li').remove();
    var food = results.rows.item(0);
    $('#foodPic').attr('src', 'pics/' + food.picture);
    $('#foodName').text(food.foodName);
    $('#foodgroupName').text(food.groupfoodName);
    $('#foodQuantity').text(food.quantity);
    $('#foodPortion').text(food.portion);

    console.log(food.glucides);
        if (food.glucides) {
        $('#actionList').append('<li><a href="tel:' + food.glucides + '"><p class="line1">Teneur en Glucides</p>' +
                '<p class="line2">' + food.glucides + '</p><img src="img/food.png" class="action-icon"/></a></li>');
    }
    $('#foodList').listview('refresh');
    db = null;
}

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
4

0 回答 0