Sqlite 的第二页 JQM Listview 不刷新

Question

我正在开发一个离线应用程序，目前可以运行在我的笔记本电脑上使用。我从 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>

现在，如果我交换第一页和第二页的内容，我会收到警报："error processing 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>

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

Working DEMO

Sqlite 的第二页 JQM Listview 不刷新

Second page JQM Listview from Sqlite do not refresh

sqlite

listview

jquery-mobile

jquery-mobile-listview