0

JQuery Mobile のメッセージに関するすべての質問を読みましたが、問題に対する答えが見つかりませんでした。

各リスト項目がクエリの結果を含む新しいページを開くリストを含むページがあります。すべて正常に動作していますが、クエリ中、クエリが完了するまでターゲット ページが空白で表示されます。私が欲しいのは、検索が進行中であることをユーザーに通知することですが、関数を配置する適切な位置が見つかりませんでした。

// in each li of list_a I have a href to page_b, that resultas in
// <li id="op1"><a href="#page_b" data-transition="slide" class="ui-link-inherit">Option A</a></li>
// <li id="op2"><a href="#page_b" data-transition="slide" class="ui-link-inherit">Option B</a></li>
// <li id="op3"><a href="#page_b" data-transition="slide" class="ui-link-inherit">Option C</a></li>

$('#list_a').on('click', 'li', function () {
    id = this.id;
    do_query(id);
});
function do_query(id) {
    //$.mobile.showPageLoadingMsg(); // doesn't work
    sql = 'SELECT ... ... ';
    db.transaction(
    function (tx) { tx.executeSql(sql,[id], populate_page, errorHandler); });
}
function populate_page(tx, results) {
    $('#list_b').children().remove('li');
    for (var i = 0; i < results.rows.length; i++) {
        var row = results.rows.item(i);
        $('#list_b').append('result data...').listview('refresh');
    }
}
4

2 に答える 2

1

多くのテストの後、私は中間的な解決策を見つけました。

私が欲しいのは、最初のページまたはターゲットページ上で回転するボールです。この回避策では、空白の画面にメッセージが表示されますが、処理に関する情報がない空のページよりも優れています。

このアプローチでは、リスト内のhrefは必要ありません。

    $('#list_a').on('click', 'li', function () {
        id = this.id;
        do_query(id);
    });
    function do_query(id) {

        // added
        $.mobile.changePage('#pag_b', { transition: 'pop' }); // transition slide fails
        $.mobile.showPageLoadingMsg("e","Searching...",true); // only shows the text
        // the ajax-loader.gif graphic stay static, doesn't spin

        sql = 'SELECT ... ... ';
        db.transaction(
        function (tx) { tx.executeSql(sql,[id], populate_page, errorHandler); });
    }
    function populate_page(tx, results) {
        $('#list_b').children().remove('li');
        for (var i = 0; i < results.rows.length; i++) {
            var row = results.rows.item(i);
            $('#list_b').append('result data...').listview('refresh');
        }
    }
于 2012-04-20T03:05:13.013 に答える
0

#list_a クリック ハンドラーで do_query(id) を呼び出す直前に、メッセージを表示する必要があるように思えます。

例えば：

$('#list_a').on('click', 'li', function () {
    id = this.id;
    showSearching(); //function to handle 'search in progress'
    do_query(id);
});

function showSearching(){
//show message however you'd like
//might use a jqueryui modal or something

}

ただし、成功時と失敗時の両方でそのメッセージを非表示にすることも処理する必要があります。例えば：

function populate_page(tx, results) {
    $('#list_b').children().remove('li');
    for (var i = 0; i < results.rows.length; i++) {
        var row = results.rows.item(i);
        $('#list_b').append('result data...').listview('refresh');
    }

    hideSearching(); //call message hide function
}

function errorHandler(){
    hideSearching(); //call message hide function

    //other error handling

}

function hideSearching(){
    //hide the search message

}

お役に立てれば！

于 2012-04-19T19:20:44.620 に答える