Databases
StackOverflow2013
Postsdbo
POPhoneGap jquerymobile SQL dynamic link
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPhoneGap jquerymobile SQL dynamic link
    text
    copied!<p>I am building a PhoneGap iOS App with the help of the jquery-mobile framework. I have a primary jquery-mobile autodivided list, populated by an SQL database. This autodivided list work as expected. When clicking on one link of this dynamic list, a dynamic page is supposed to fire up, containing some extra details included in the same SQL database. However, when the database doesn't load the page details.</p> <p>I successfully made this work outside jquerymobile framework, with a few script changes. But I really need the autodividers function coming from jquerymobile.</p> <p>First I assumed that this dynamic page was outside the DOM, but adding the following function at mobileinit() doesn't solve my SQL loading issue:</p> <pre><code>$( 'fooddetails.html?id' ).live( 'pagebeforecreate',function(event, ui){ alert( 'This page was just inserted into the dom!' ); }); </code></pre> <p>Below is a complete script for my database &amp; the dynamic URL to fire the extra details page:</p> <pre><code>var db; var dbCreated = false; document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { db = window.openDatabase("FoodDirectoryDB", "1.0", "PhoneGap", 200000); if (dbCreated) db.transaction(getAlimentaries, transaction_error); else db.transaction(populateDB, transaction_error, populateDB_success); } function transaction_error(tx, error) { $('#busy').hide(); alert("Database Error: " + error); } function populateDB_success() { dbCreated = true; db.transaction(getAlimentaries, transaction_error); } function getAlimentaries(tx) { var sql = "select e.id, e.foodName, e.groupfoodName, e.quantity, e.picture, count(r.id) reportCount " + "from food e left join food r on r.managerId = e.id " + "group by e.id order by e.foodName "; tx.executeSql(sql, [], getAlimentaries_success); } function getAlimentaries_success(tx, results) { $('#busy').hide(); $('#foodList li').remove(); var len = results.rows.length; for (var i=0; i&lt;len; i++) { var food = results.rows.item(i); console.log(food.foodName); $('#foodList').append('&lt;li&gt;&lt;a href="fooddetails.html?id=' + food.id + '"&gt;' + '&lt;img src="pics/' + food.picture + '" class="arrow-r"/&gt;' + '&lt;p class="line1"&gt;' + food.foodName + '&lt;/p&gt;' + '&lt;/a&gt;&lt;/li&gt;'); $( 'employeedetails.html?id' ).live( 'pageshow',function(event, ui){ alert( 'This page was just inserted into the dom!' ); }); } $('#foodList').listview('refresh'); db = null; } function populateDB(tx) { $('#busy').show(); tx.executeSql('DROP TABLE IF EXISTS food'); var sql = "CREATE TABLE IF NOT EXISTS food ( "+ "id INTEGER PRIMARY KEY AUTOINCREMENT, " + "foodName VARCHAR(50), " + "groupfoodName VARCHAR(50), " + "quantity VARCHAR(50), " + "portion VARCHAR(50), " + "managerId INTEGER, " + "glucides VARCHAR(30), " + "picture VARCHAR(200))"; tx.executeSql(sql); tx.executeSql("INSERT INTO food (id,foodName,groupfoodName,managerId,quantity,portion,glucides,picture) VALUES (1,'Abricot','Fruits frais et fruits secs',1,'1 abricot','65g','5','fruits_legumes.png')"); tx.executeSql("INSERT INTO food (id,foodName,groupfoodName,managerId,quantity,portion,glucides,picture) VALUES (2,'Abricots secs','Fruits frais et fruits secs',1,'4 abricots secs','80g','30','fruits_legumes.png')"); </code></pre> <p>I was also trying to add data-ajax="false" rel"external" to this dynamic link, but this doesn't change unfortunately and I read that these attributes in a dynamic link are not authorized:</p> <pre><code>$('#foodList').append('&lt;li&gt;&lt;a href="fooddetails.html?id=' + food.id + '"&gt;' + </code></pre> <p>Below is the script of the details dynamic page that doesn't load correctly:</p> <pre><code> var id = getUrlVars()["id"]; var db; document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log("opening database"); db = window.openDatabase("FoodDirectoryDB", "1.0", "PhoneGap", 200000); console.log("database opened"); db.transaction(getAlimentary, transaction_error); } function transaction_error(tx, error) { $('#busy').hide(); alert("Database Error: " + error); } function getAlimentary(tx) { $('#busy').show(); var sql = "select e.id, e.foodName, e.groupfoodName, e.managerId, e.quantity, e.portion, e.glucides, " + "e.picture, m.foodName managerFirstName, m.groupfoodName managerLastName, count(r.id) reportCount " + "from food e left join food r on r.managerId = e.id left join food m on e.managerId = m.id " + "where e.id=:id group by e.groupfoodName order by e.groupfoodName, e.foodName"; tx.executeSql(sql, [id], getAlimentary_success); } function getAlimentary_success(tx, results) { $('#busy').hide(); $('#foodList li').remove(); var food = results.rows.item(0); $('#foodPic').attr('src', 'pics/' + food.picture); $('#foodName').text(food.foodName); $('#foodgroupName').text(food.groupfoodName); $('#foodQuantity').text(food.quantity); $('#foodPortion').text(food.portion); console.log(food.glucides); if (food.glucides) { $('#actionList').append('&lt;li&gt;&lt;a href="tel:' + food.glucides + '"&gt;&lt;p class="line1"&gt;Teneur en Glucides&lt;/p&gt;' + '&lt;p class="line2"&gt;' + food.glucides + '&lt;/p&gt;&lt;img src="img/food.png" class="action-icon"/&gt;&lt;/a&gt;&lt;/li&gt;'); } $('#foodList').listview('refresh'); db = null; } function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;'); for(var i = 0; i &lt; hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload