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 回答