Вторая страница JQM Listview из Sqlite не обновляется

Я разрабатываю автономное приложение, которое будет работать на моем ноутбуке. Я извлекаю данные из 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>

listview sqlite jquery-mobile jquery-mobile-listview
person eyatme    schedule 22.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Из вашего кода трудно понять, когда вы вызываете базу данных. Но если вы хотите сделать вызов, находясь на странице 1, чтобы он уже был там, когда вы переходите на страницу 2, обновите список в событии pagebeforeshow страницы 2:

$(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

person ezanker    schedule 23.03.2015