Posted 23 February 2013 - 03:44 PM
Hello all. I have developed an iOS app (using PhoneGap, HTML5, CSS and JS). On the launch of the app it populates the local database from an XML file pulled from a server, which works fine. I am currently testing it on my device. Everything seems to work well except the pages that are accessing and displaying data load too slowly. I know it is difficult since I can not link to the actual app for anyone to see but I have included some of the code that I use below. I would love to get some insight as to how I can speed it up. It can take 10-15 seconds before the data is displayed. The page header graphic is shown but the rest of the page is blank until it loads.
***Index.html***
<div data-role="content">
<ul id="recent" data-role="listview" data-filter="true">
</ul>
</div>
***trnotesjsonxml.js***
(Pulls from XML file on the server and loads it into local database)
var db = window.openDatabase('trnotes', '1.0', 'Travel Notes',3*1024*1024);
db.transaction(function(t){
t.executeSql('DROP TABLE IF EXISTS notes');
// tx.executeSql('CREATE TABLE notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, address TEXT NOT NULL, option1 TEXT NOT NULL, option2 TEXT NOT NULL)');
t.executeSql('CREATE TABLE notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, category TEXT NOT NULL, description TEXT NOT NULL, image TEXT NOT NULL, restaurant TEXT NOT NULL, address TEXT NOT NULL, city TEXT NOT NULL, state TEXT NOT NULL, statelg TEXT NOT NULL, zip TEXT NOT NULL, phone TEXT NOT NULL, url TEXT NOT NULL, lat REAL, lng REAL)');
});
$.ajax({
type: "GET",
url: 'http://www.myserver.com/challenge.xml',
dataType: "xml",
success: parseXml
});
(Queries and displays the local data)
function getTitles() {
var list = $('#recent'),
items = [];
db.transaction(function(t) { //$.mobile.notesdb.transaction(function(t) {
t.executeSql('SELECT id, title, category FROM notes ORDER BY title ASC LIMIT ?', [trNotes.limit], function(t, result) {
var i,
len = result.rows.length,
row;
if (len > 0 ) {
for (i = 0; i < len; i += 1) {
row = result.rows.item(i);
items.push('<li><a href="#page3" data-trnote="' + row.id + '">' + '<strong>' + row.title + '</strong>' + '<br>' + row.category + '</a></li>');
}
list.html(items.join('\n'));
list.listview('refresh');
$('a', list).live('click', function(e) {
getItem($(this).attr('data-trnote'));
});
$('#entries').show();
} else {
$('#entries').hide();
}
})
});
}