I am developing an offline application that will run for now on my laptop. I pull data from Sqlite and display data in a listview. It works fine for the first page but if I want the list view data displayed on the second page it does not work. What am I missing?
The working code for displaying on first page:
<!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>
Now if I swap the content of page one and page two, I got the alert :"error processing SQL:0" and I lose the formatting of the listview on page two. What am I missing? Here is the code with page content swaped:
<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>
Thanks a lot I got it to work like this:
<!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>
From your code it is hard to see when you are calling the database. But assuming you want to make the call while on page1, so that it is already there when you navigate to page2, refresh the listview on the pagebeforeshow event of page2:
$(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