Question

我在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');
    }
}

Answer 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');
        }
    }

Answer 2

听起来你应该在你的#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

}

希望这有帮助！

JQuery Mobile：如何在查询Web SQL时显示消息

2 个答案: