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

我阅读了关于JQuery Mobile中消息的所有问题，但无法找到我的问题的答案。JQuery Mobile：如何在查询Web SQL时显示消息

我有页面列表，其中每个列表项打开一个新的页面与查询的结果。这一切都正常工作，但我在查询过程中目标页面显示为空白，直到查询完成。我想要通知用户正在进行搜索，但我找不到放置该功能的适当位置。

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

来源

2012-04-19 nfuria

听起来像是你要显示的消息，但是你会想对你在你的#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-19 19:20:44

我想使用jQuery Mobile的'showPageLoadingMsg（）'，但我想你的方法：创建一个div只是befor与列表 – nfuria 2012-04-19 23:22:43

股利我想使用jQuery Mobile的'showPageLoadingMsg（）'但我尝试了你的方法：我在列表前用div创建了一个div，并创建了显示和隐藏div的函数。它不起作用：带链接的页面将保留在屏幕上，直到查询返回列表。 – nfuria 2012-04-19 23:28:49

如果你想使用showPageLoadingMsg（），只要确保在jq移动加载之前绑定它。我发现在话题另一个线程，可以帮助 http://stackoverflow.com/questions/7028925/jquery-mobile-showpageloadingmsg-hidepageloadingmsg-methods-not-working-on-i 如果这是一个有点不清楚，然后我很乐意解释。 – 2012-05-29 21:46:09

经过大量的测试后，我找到了一个中介解决方案。

我想要的是在第一页或目标页面上的旋转球。此变通办法会在空白屏幕上显示消息，但比没有关于处理信息的空白页面更好。

使用这种方法，列表中的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-20 03:05:13 nfuria

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

回答

相关问题