我尝试在将一些xml数据解析到应用程序中后，在我的应用程序中加载和显示WebSQL数据库。问题是只有在我重新加载应用程序后才会显示数据库。有没有什么方法可以用来在第一次发布时显示它？
以下是我用于显示数据库条目的代码：
<script>
var db;
$(document).ready(function () {
createDatabaseAndPopulateRecords();
loadEventRecords();
$(document).on("click", "#aEventRecord", function () {
console.log('You just tapped on record number : ' + $(this).data('key'));
getEventById($(this).data("key"));
});
});
function createDatabaseAndPopulateRecords() {
//set-up database name
console.log('Creating database...');
db = openDatabase('events', '1.0', 'eventsDatabase', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS events (id UNIQUE, name, location, date, descr, img)');
});
parseXMLtoDB();
}
function parseXMLtoDB() {
$.get('eventsdata.xml', function (xml) {
$(xml).find("event").each(function () {
var id, name, location, date, descr, img;
id = $(this).find("id").text();
name = $(this).find("name").text();
location = $(this).find("location").text();
date = $(this).find("date").text();
descr = $(this).find("description").text();
img = $(this).find("img").text();
db.transaction(function (tx) {
tx.executeSql('INSERT INTO events (id, name, location, date, descr, img) VALUES (?,?,?,?,?,?)', [id, name, location, date, descr, img]);
});
console.log(id, name, location, date);
});
});
}
function loadEventRecords() {
console.log('Loading events records from database into #listofevents ul...');
db.transaction(function (txs) {
txs.executeSql('SELECT * FROM events', [], function (txs, results) {
var len = results.rows.length, i;
//loop around each event record in the database
for (i = 0; i < len; i++) {
var EventRecord = results.rows.item(i);
//create event list item list item.
var individualEvent = '';
individualEvent = '<li><a href="#detailinfo" id="aEventRecord" data-key="' + EventRecord.id + '" >';
individualEvent += '<h3>' + EventRecord.name + '</h3>';
individualEvent += '<img height="90" width="80" src="' + EventRecord.img + '" />';
individualEvent += '<p>Details</p>';
individualEvent += '</a></li>';
//add the event to the list item and refresh the listview to ensure formatting is retained.
$('#listofevents ul').append(individualEvent);
$('#listofevents ul:visible').listview('refresh');
} //end for loop
});
});
}
function getEventById(id) {
db.transaction(function (txs) {
txs.executeSql('SELECT * FROM events where id="' + id + '"', [], function (txs, results) {
var len = results.rows.length, i;
//loop around each event record in the database
for (i = 0; i < len; i++) {
var EventRecord = results.rows.item(i);
//create event list item list item.
var individualEvent = '';
individualEvent += '<h3>' + EventRecord.name + '</h3>';
individualEvent += '<img height="300" width="300" src="' + EventRecord.img + '" />';
individualEvent += '<p>' + EventRecord.location + '</p>';
individualEvent += '<p>' + EventRecord.descr + '</p>';
individualEvent += ' ';
//add the event to the div called #eventSummary (located in the detailinfo sceen)
$('#eventSummary').html(individualEvent);
} //end for loop
});
});
}
</script>
HTML
<!-- added new database driven menu -->
<!-- Start of events page -->
<div data-role="page" id="events" data-add-back-btn="true" data-back-btn-text="Back" data-transition="slide">
<div data-role="header">
<h1>Events Database</h1>
</div><!-- /header -->
<div data-role="content">
<p>Events near you</p>
<div data-role="content" id="listofevents">
<ul data-role="listview" data-filter="true" data-inset="true">
<!-- events will be inserted here from the database using jquery -->
</ul>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>
<img src="logo_small.png" width="20px" height="20px" alt="Failed" />
University of Sunderland
</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- end of database driven menu -->
这是我第一次加载应用程序时得到的结果：http://i.imgur.com/v7liyjH.jpg
这是我希望它在首次运行时显示的内容，但仅在我重新加载页面后才会显示：http://i.imgur.com/64yYCG8.jpg
答案 0 :(得分：0)
你是100％是SQLite而不是WEBSql或indexedDB。
您使用的查询看起来像WEBSql语句。
它应该显示Data Straight，所以
问题是如何调用此函数loadEventRecords（）
它不会运行，除非有人称它像点击功能一样运行。该功能还可以，但需要调用它才能运行。
如果您只是想在第一次加载页面时运行它，那么
尝试使用实时功能并将其放在HEAD中，将#mypage更改为您的页面ID Live方法适用于JQM1.3但已弃用以用于更高版本，因此请将实时替换为---- $（＆＃39; #mypage＆＃39;）。on（＆＃39; pageshow＆＃39;，function（ event）{----如果你使用JQM1.4
$( '#mypage' ).live( 'pageshow',function(event){
console.log('Loading events records from database into #listofevents ul...');
db.transaction(function (txs) {
txs.executeSql('SELECT * FROM events', [], function (txs, results) {
var len = results.rows.length, i;
//loop around each event record in the database
for (i = 0; i < len; i++) {
var EventRecord = results.rows.item(i);
//create event list item list item.
var individualEvent = '';
individualEvent = '<li><a href="#detailinfo" id="aEventRecord" data-key="' +
EventRecord.id + '" >';
individualEvent += '<h3>' + EventRecord.name + '</h3>';
individualEvent += '<img height="90" width="80" src="' + EventRecord.img + '"
/>';
individualEvent += '<p>Details</p>';
individualEvent += '</a></li>';
//add the event to the list item and refresh the listview to ensure
formatting is retained.
$('#listofevents ul').append(individualEvent);
$('#listofevents ul:visible').listview('refresh');
} //end for loop
});
});
}）;
如果不起作用，请将上述内容放在HTML标记之后的页面底部
如果不起作用，请将下面的脚本放在页面底部没有函数语句，以便在整个页面加载时最后执行
console.log('Loading events records from database into #listofevents ul...');
db.transaction(function (txs) {
txs.executeSql('SELECT * FROM events', [], function (txs, results) {
var len = results.rows.length, i;
//loop around each event record in the database
for (i = 0; i < len; i++) {
var EventRecord = results.rows.item(i);
//create event list item list item.
var individualEvent = '';
individualEvent = '<li><a href="#detailinfo" id="aEventRecord" data-key="' + E ventRecord.id + '" >';
individualEvent += '<h3>' + EventRecord.name + '</h3>';
individualEvent += '<img height="90" width="80" src="' + EventRecord.img + '"
/>';
individualEvent += '<p>Details</p>';
individualEvent += '</a></li>';
//add the event to the list item and refresh the listview to ensure
formatting is retained.
$('#listofevents ul').append(individualEvent);
$('#listofevents ul:visible').listview('refresh');
} //end for loop
});
});
拥有这样的脚本你只是希望在第一次加载页面时显示数据，只需放置它们而不使用HTML页面底部的函数。这使脚本能够最后运行，从而显示数据。