Response title
This is preview!
database-driven hierarchical navigation with JQTouch
in Getting Started
•
12 years ago
Hi,
I'm new to jQuery/jQTouch and trying to code a listview based navigation with entries loaded from an SQLite database.
Basically this is the hierarchy:
- 1st level: list with static entries
- 2nd level: list with entries loaded from database
- 3rd level: detail view of an entry
I managed to code the 1st and 2nd level but when tapping an entry of 2nd level the list will reload instead of loading and displaying the details.
I'm not completely sure if my approach is right so I'm having difficulties to figure out what's wrong.
Here's my code (BTW it's based on an example from Jonathan Stark, see http://ofps.oreilly.com/titles/9780596805784//ch05.html):
index.html, see attachment.
I'm new to jQuery/jQTouch and trying to code a listview based navigation with entries loaded from an SQLite database.
Basically this is the hierarchy:
- 1st level: list with static entries
- 2nd level: list with entries loaded from database
- 3rd level: detail view of an entry
I managed to code the 1st and 2nd level but when tapping an entry of 2nd level the list will reload instead of loading and displaying the details.
I'm not completely sure if my approach is right so I'm having difficulties to figure out what's wrong.
Here's my code (BTW it's based on an example from Jonathan Stark, see http://ofps.oreilly.com/titles/9780596805784//ch05.html):
index.html, see attachment.
nationalpark.js:
Hope someone can point me to a solution.
Thankx in advance!
Robin
- var jQT = $.jQTouch({
icon: 'kilo.png',
statusBar: 'black'
});
var db;
$(document).ready(function(){
$('#de').click(function(){
sessionStorage.country = this.id;
getNationalparks();
});
var shortName = 'Nationalparks';
var version = '1.0';
var displayName = 'Nationalparks';
var maxSize = 65536;
/*
the db transaction are just to populate the db
*/
db.transaction(
function(transaction) {
transaction.executeSql(
'DROP TABLE IF EXISTS "nationalparks";',
[],
function (transaction, result) {
},
errorHandler
);
}
);
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS "nationalparks" ' +
' ( "id" INTEGER NOT NULL PRIMARY KEY, ' +
' "country" TEXT NOT NULL, ' +
' "name" NOT NULL, ' +
' "creation_date" NUMERIC NOT NULL, ' +
' "size_ha" FLOAT NOT NULL, ' +
' "geo_x" FLOAT NOT NULL, ' +
' "geo_y" FLOAT NOT NULL, ' +
' "description" TEXT NOT NULL, ' +
' "image" TEXT NOT NULL, ' +
' "image_desc" TEXT NOT NULL, ' +
' "logo_img" TEXT NOT NULL, ' +
' "homepage" TEXT NOT NULL, ' +
' "wikipedia_link" TEXT NOT NULL' +
' );',
[],
function (transaction, result) {
},
errorHandler
);
}
);
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO "nationalparks" VALUES ' +
' ( 0, ' +
' "de", ' +
' "Nationalpark Bayerischer Wald ", ' +
' 1970, ' +
' 24.25, ' +
' 48.966667, ' +
' 13.383333, ' +
' "bla bla bla", ' +
' "nationalpark_bayerischer_wald_landschaft.jpg", ' +
' "bla bla bla", ' +
' "nationalpark_bayerischer_wald_logo.jpg", ' +
' "http://www.nationalpark-bayerischer-wald.de/", ' +
' "http://de.m.wikipedia.org/wiki/Nationalpark_Bayerischer_Wald" ' +
' );',
[],
function (transaction, result) {
},
errorHandler
);
}
);
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO "nationalparks" VALUES ' +
' ( 1, ' +
' "de", ' +
' "Nationalpark Berchtesgaden", ' +
' 1970, ' +
' 20.808, ' +
' 47.55, ' +
' 12.933333, ' +
' "bla", ' +
' "nationalpark_berchtesgaden_landschaft.jpg", ' +
' "bla", ' +
' "nationalpark_berchtesgarden_logo.gif", ' +
' "http://www.nationalpark-berchtesgaden.bayern.de/", ' +
' "http://de.m.wikipedia.org/wiki/Nationalpark_Berchtesgaden" ' +
' );',
[],
function (transaction, result) {
},
errorHandler
);
}
);
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO "nationalparks" VALUES ' +
' ( 2, ' +
' "de", ' +
' "Nationalpark Schleswig-Holsteinisches Wattenmeer", ' +
' 1985, ' +
' 441.5, ' +
' 54.45, ' +
' 8.65, ' +
' "bla bla", ' +
' "nationalpark_sw_wattenmeer_landschaft.jpg", ' +
' "bla bla", ' +
' "nationalpark_sw_wattenmeer_logo.jpg", ' +
' "http://www.wattenmeer-nationalpark.de/main.htm", ' +
' "http://de.m.wikipedia.org/wiki/Nationalpark_Schleswig-Holsteinisches_Wattenmeer" ' +
' );',
[],
function (transaction, result) {
},
errorHandler
);
}
);
});
function getNationalparks() {
var country = sessionStorage.country;
$('#' + country + ' ul li:gt(0)').remove();
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM nationalparks WHERE country = ? ORDER BY name;',
[country],
function (transaction, result) {
alert(result.rows.length + " Nationalparks geladen!");
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
var newEntryRow = $('#nationalparkListTemplate_' + country).clone();
newEntryRow.removeAttr('id');
newEntryRow.removeAttr('style');
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#' + country + ' ul');
newEntryRow.find('.name').text(row.name);
newEntryRow.find('.creation_date').text(row.creation_date);
newEntryRow.find('.size_ha').text(row.size_ha);
}
},
errorHandler
);
}
);
}
function getNationalparkDetails(id) {
alert(id);
// more to be done: inject DB field values into text spans etc.
}
Hope someone can point me to a solution.
Thankx in advance!
Robin
1