I'm newbie in JQuery Mobile, I try to build an cross-mobile application using 'HTML5, CSS3, Phonegap, JQuery Mobile and SQLITE' I'm trying to populate a Collapsible set with data coming from an Sqlite DB without success. my HTML part for it is:
<div data-role='page' id='P_Aliments' data-theme="o">
<div data-role='header' data-theme="o" >
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="flip">home</a>
<h1><i class="fa fa-beer "></i> Aliments <i class="fa fa-cutlery"></i></h1>
</div>
<div data-role="content">
<div data-role='collapsibleset'
data-corners='true'
data-theme='d'
data-content-theme='d'
data-inset='true'
id="CollAlim">
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="o">
<h3>footer</h3>
</div>
</div>
my script:
$("#B_Aliments").on("click", function (event)
{
var html = "";
var html2 = "";
$('#CollAlim').html("");
db.transaction(function (tx)
{
var sql = "SELECT DISTINCT Type FROM T_Aliments ORDER BY Type ASC";
tx.executeSql(sql, undefined,
function (tx, result)
{
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++) // for each Type
{
var row = result.rows.item(i);
var TypeAlim = row.Type;
var html = "<div data-role=collapsible data-theme='a' data-collapsed=true>";
html += "<h3>" + TypeAlim + "</h3>";
// ************************************************************
var sqlAlim = "SELECT id, Description FROM T_Aliments WHERE Type ='" + TypeAlim + "'";
tx.executeSql(sqlAlim, undefined,
function (tx, result2)
{
console.log(result2.rows.length);
if (result2.rows.length)
{
for (var j = 0; j < result2.rows.length; j++) // for each description
{
var row2 = result2.rows.item(j);
console.log(row2);
var id = row2.id;
var desc = row2.Description;
html += "<p><a href='#' id='" + id + "'>" + desc + "</a></p>";
}
}
else
{
html = "<h3>Table vide</h3>";
}
}, erreur_bd);
// ************************************************************
html += "</div>";
console.log("html=" + html);
html2 += html;
console.log("html2=" + html2);
}
} else
{
html = "<h3>Table vide</h3>";
}
$("#P_Aliments").unbind().bind("pagebeforeshow", function ()
{
$(html2).appendTo("#CollAlim").enhanceWithin("refresh");
$("#P_Aliments").trigger("create");
});
$.mobile.changePage($("#P_Aliments"));
}, erreur_bd);
});
});
// *****************************************************************************
function erreur_bd(tx, erreur)
{
alert("Erreur BD: " + erreur.message);
return false;
}
function ok_bd()
{
}
The collapsible set and collapsible headers are well populated, but the collapsible content aren't. The part that should generate te content is between //*****************
Could someone help me ? Thanks in advance
Aucun commentaire:
Enregistrer un commentaire