Collapsible set filled with sqlite db datas not showed as collapsible
Hello,I'm newbie in jquery mobile.
I try to build an application for mobile using (html5, cordova, jquery mobile and sqlite db)
All is working fine, except the layout of the page after populated with the datas retrieved. The collapsible set is not build as it should. It just appears without any format. (sorry for my English)
the html code 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" id='Alim1'>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<h3>Another Leather & Digit Stuff</h3>
</div>
</div>
the javascript:
$("#B_Aliments").bind("click", function (event)
{
db.transaction(function (tx)
{
var sql = "SELECT DISTINCT Type FROM T_Aliments ORDER BY Type ASC";
tx.executeSql(sql, undefined,
function (tx, result)
{
var html = "<div data-role='collapsibleset' data-corners='false' data-theme='a' data-content-theme='a' data-inset='true'>";
if (result.rows.length)
{
console.log(result.rows.length);
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item(i);
console.log(row);
var Type = row.Type;
html += "<div data-role=collapsible data-theme='a' data-collapsed=true class='ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed'>";
html += "<h3>" + Type + "</h3>";
html += "<p>Collapsible content</p>";
html += "</div>";
}
} else
{
html += "<h3>Table vide</h3>"
}
html += "</div>";
$("#P_Aliments").bind("pagebeforeshow", function ()
{
var $content = $("#P_Aliments div:jqmData(role=content)");
$content.html(html);
var $coll = $content.find("collapsible");
$coll.collapsible();
});
$.mobile.changePage($("#P_Aliments"));
}, erreur_bd);
});
});
// *****************************************************************************
function erreur_bd(tx, erreur)
{
alert("Erreur BD: " + erreur.message);
return false;
}
function ok_bd()
{
}
I'll be glad if someone could help me to find out a solution.
Thanks in advance