来自Sqlite的第二页JQM Listview不刷新
Posted
技术标签:
【中文标题】来自Sqlite的第二页JQM Listview不刷新【英文标题】：Second page JQM Listview from Sqlite do not refresh 【发布时间】：2015-05-25 13:38:36 【问题描述】：我正在开发一个离线应用程序，现在可以在我的笔记本电脑上运行。我从 Sqlite 中提取数据并在列表视图中显示数据。它适用于第一页，但如果我希望在第二页上显示列表视图数据，则它不起作用。我错过了什么？
第一页显示的工作代码：
<!DOCTYPE html>
<html>
<head>
<title>Soccer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
var db = window.openDatabase("ShoufiMobi", "1.0", "Just a Dummy DB", 200000); //will create database Dummy_DB or open it
//function will be called when an error occurred
function errorCB(err)
alert("Error processing SQL: "+err.code);
//function will be called when process succeed
function successCB()
// alert("success!");
db.transaction(queryDB,errorCB);
//select all from SoccerPlayer
function queryDB(tx)
tx.executeSql('SELECT * FROM Mailbox',[],querySuccess,errorCB);
function querySuccess(tx,result)
$('#SoccerPlayerList').empty();
$.each(result.rows,function(index)
var row = result.rows.item(index);
$('#SoccerPlayerList').append('<li><a href="#pagetwo"><img src="public_80x80.png"><h3 class="ui-li-heading">'+row['boxname']+'</h3><p class="ui-li-desc">Email '+row['boxstatus']+'</p><span class="ui-li-count">25</span></a></li>');
);
$('#SoccerPlayerList').listview();
successCB();
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Soccer Player</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="SoccerPlayerList">
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer</h4>
</div><!-- /footer -->
</div><!-- /pageone -->
<div data-role="page" id="pagetwo">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Welcome To My Second Page</h1>
</div>
<div data-role="content">
<a href="#pageone"><h4> hello</h4></a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
现在，如果我交换第一页和第二页的内容，我会收到警报：“错误处理 SQL:0”，并且我丢失了第二页上列表视图的格式。我错过了什么？ 这是页面内容交换的代码：
<body>
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Soccer Player</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#pagetwo"><h4> hello</h4></a>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer</h4>
</div><!-- /footer -->
</div><!-- /pageone -->
<div data-role="page" id="pagetwo">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Welcome To My Second Page</h1>
</div>
<div data-role="content">
<ul id="SoccerPlayerList">
</ul>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
非常感谢我让它像这样工作：
<!DOCTYPE html>
<html>
<head>
<title>Soccer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
var db = window.openDatabase("ShoufiMobi", "1.0", "Just a Dummy DB", 200000); //will create database Dummy_DB or open it
$(document).on("pageinit", "#pageone", function ()
//function will be called when an error occurred
function errorCB(err)
alert("Error processing SQL: "+err.code);
//function will be called when process succeed
function successCB()
// alert("success!");
db.transaction(queryDB,errorCB);
//select all from SoccerPlayer
function queryDB(tx)
tx.executeSql('SELECT * FROM Mailbox',[],querySuccess,errorCB);
function querySuccess(tx,result)
$('#SoccerPlayerList').empty();
$.each(result.rows,function(index)
var row = result.rows.item(index);
$('#SoccerPlayerList').append('<li><a href="#pagetwo"><img src="public_80x80.png"><h3 class="ui-li-heading">'+row['boxname']+'</h3><p class="ui-li-desc">Email '+row['boxstatus']+'</p><span class="ui-li-count">25</span></a></li>');
);
successCB();
); //on pageinit #pageone
$(document).on("pagebeforeshow", "#pagetwo", function ()
$('#SoccerPlayerList').listview();
);
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Soccer Player</h1>
</div>
<!-- /header -->
<div data-role="content">
<a href="#pagetwo"><h4> hello</h4></a>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /pageone -->
<div data-role="page" id="pagetwo">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Welcome To My Second Page</h1>
</div>
<div data-role="content">
<a href="#pageone"><h4> Back</h4></a>
<ul id="SoccerPlayerList"></ul>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：从您的代码中很难看出您何时调用数据库。但是假设您想在 page1 上进行调用，以便导航到 page2 时它已经存在，请在 page2 的 pagebeforeshow 事件上刷新列表视图：
$(document).on("pageinit", "#pageone", function ()
$('#SoccerPlayerList').empty();
$.each(result.rows, function (index, row)
$('#SoccerPlayerList').append('<li><a href="#pagetwo"><img src="http://lorempixel.com/80/80/technics/' + index + '/"><h3 class="ui-li-heading">' + row['boxname'] + '</h3><p class="ui-li-desc">Email ' + row['boxstatus'] + '</p><span class="ui-li-count">25</span></a></li>');
);
);
$(document).on("pagebeforeshow", "#pagetwo", function ()
$('#SoccerPlayerList').listview();
);
工作DEMO
【讨论】：
以上是关于来自Sqlite的第二页JQM Listview不刷新的主要内容，如果未能解决你的问题，请参考以下文章