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="http://ift.tt/1EYr3R2">
<script src="http://ift.tt/1CIHkXD"></script>
<script src="http://ift.tt/1EYr5sc"></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>
Aucun commentaire:
Enregistrer un commentaire