JQuery Mobile:如何在查询 Web SQL 时显示消息
JQuery Mobile: How to show a message while querying Web SQL
我在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');
}
}
经过大量测试,我找到了一个中间解决方案。
我想要的是第一页或目标页面上的旋转球。此解决方法会导致在空白屏幕上显示消息,但它比没有有关处理信息的空白页面要好。
使用此方法,列表中的 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');
}
}
听起来你应该在
#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
}
希望这有帮助!
相关文章:
- 从 Web SQL 数据库检索音频并使用 Web 音频 API 播放
- 外键的HTML5 Web SQL值
- 具有Web SQL数据库的客户端存储
- 如何使用函数从Web SQL数据库中检索值
- Web SQL事务在javascript函数中未正确执行
- SQL语句是通过PhoneGap'按顺序执行的吗;的Web SQL数据库
- 如何在Web SQL数据库中逐行插入文本文件
- 如何在 Web sql 中显示事务成功警报
- Web SQL 将数据插入到多行中
- 无法在 Web SQL 数据库中创建新表
- Web sql 仅适用于调试
- Android 4.0.3 Web 浏览器是否支持 Web SQL 数据库?
- Web SQL 数据库 - 执行 asyc 调用并继续
- Web SQL Grow Database for iOS
- Web Sql 选择语句无法提取第三列
- JQuery Mobile:如何在查询 Web SQL 时显示消息
- 在HTML 5 / Javascript中批量插入到客户端数据库(WEB SQL)
- 如何在node-webkit应用程序中连接Web sql
- JavaScript Web SQL回调插入(如果不存在)
- 构建连接到SQL server的web应用程序的步骤