1

jquery-mobile フレームワークを使用して PhoneGap iOS アプリを構築しています。SQL データベースによって設定されたプライマリ jquery-mobile 自動分割リストがあります。この自動分割されたリストは期待どおりに機能します。この動的リストの 1 つのリンクをクリックすると、同じ 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