http://www.dumpy.be/O-diab/wwwonly
informations and aliments are set for the moment
also I don't understand why button generated dynamycally don't works?
I've generate it by:
('#P_Aliments').on('click', '#CollAlim a',
function (event)
{
event.preventDefault(); // You probably want to prevent the default action
$('#Pop_Detail_Alim').html("");
var htmlDetailAlim = "";
var $a = $(this);
var product = $a.data('product');
var sqlSelectAlim = "SELECT * FROM T_Aliments WHERE id ="
+ product;
db.transaction(function (tx)
{
tx.executeSql(sqlSelectAlim, undefined, function (tx, result)
{
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item(i);
var Id = row.id;
var Type = row.Type;
var Desc = row.Description;
var Q = row.Quantite;
var IG = row.IG;
var Cal = row.Calories;
var Glu = row.Glucides;
var Lip = row.Lipides;
var Eau = row.Eau;
var Rem = row.Remarque;
htmlDetailAlim += "<div
data-role='header' data-theme='d'>";
htmlDetailAlim += "<a
href='#P_Aliments' class='ui-btn ui-icon-back
ui-btn-icon-notext ui-corner-all'>retour</a>";
htmlDetailAlim += "<h3>" + Desc + "</h3>";
htmlDetailAlim += "</div>";
htmlDetailAlim += "<div
data-role='content' data-theme='d'>";
htmlDetailAlim += "<div
class='ui-grid-a data-inset='true'>'";
htmlDetailAlim += "<div
class='ui-block-a'><h4>Quantité de référence :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input value='" + Q + "'/></div>";
switch (true) {
case (IG > 70):
htmlDetailAlim += "<div
class='ui-block-a'><h4>Indice glycémique :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input class='Input_Red'
value='" + IG + "'/></div>";
break;
case ((IG > 50) && (IG <= 70)):
htmlDetailAlim += "<div
class='ui-block-a'><h4>Indice glycémique :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input class='Input_Orange'
value='" + IG + "'/></div>";
break;
default:
htmlDetailAlim += "<div
class='ui-block-a'><h4>Indice glycémique :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input class='Input_Green'
value='" + IG + "'/></div>";
break;
}
htmlDetailAlim += "<div
class='ui-block-a'><h4>Calories :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input value='" + Cal + " cal.'/></div>";
htmlDetailAlim += "<div
class='ui-block-a'><h4>Glucides :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input value='" + Glu + "gr'/></div>";
htmlDetailAlim += "<div
class='ui-block-a'><h4>Lipides :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input value='" + Lip + "gr'/></div>";
htmlDetailAlim += "<div
class='ui-block-a'><h4>Eau :</h4></div>";
htmlDetailAlim += "<div
class='ui-block-b'><input value='" + Eau + "'/></div>";
htmlDetailAlim += "<div
class='ui-block-a' ><h4>Remarques :</h4></div>";
htmlDetailAlim += "<div><textarea
data-theme='d' value='" + Rem + "'></textarea></div>";
htmlDetailAlim += "<br/>";
htmlDetailAlim += "</div>";
htmlDetailAlim +=
"<div data-role='controlgroup'
data-inline='true' data-type='horizontal'
class='PorteBouton'>";
htmlDetailAlim += "<button href='#P_Aliments'
class='ui-btn
ui-btn-inline'>Retour</button>";
htmlDetailAlim += "<button id='B_MaJ_Aliments'
class='ui-btn
ui-btn-inline'>Modifier</button>";
htmlDetailAlim += "<button id='B_Sup_Aliments'
class='ui-btn
ui-btn-inline'>Supprimer</button>";
htmlDetailAlim += "</div>";
htmlDetailAlim += "<br />";
htmlDetailAlim += "</div>";
}
} else
{
htmlDetailAlim = "<h3>Table vide</h3>";
}
console.log(htmlDetailAlim);
$(htmlDetailAlim).appendTo("#Pop_Detail_Alim");
$.mobile.changePage($("#Pop_Detail_Alim"),
{transition: "flip", reverse: true});
$("#Pop_Detail_Alim").enhanceWithin();
}, erreur_bd);
});
and the html code is: <div data-role='page'
id='Pop_Detail_Alim' data-theme="d">
