Limit of the cooperation of HTML 5 and JQueryMobile
I can't correctly display the "select" result of my HTML 5 database : is it a limit of the cooperation of HTML v5 with JQueryMobile,
When I use HTML basic elements between these closure I can view the correct display in the "listview" HTML object :
- $(document).bind("mobileinit", function(){ // Waiting for JQueryMobile loading
$(document).ready(function() { // Waiting for DOM loading
$('#listviewCarnets').append(
"<li><a id=\"carnetAffich1\" rel=\"external\" href=\"pagecarnetAffich.php\">Carnet d'espagne, 1998 - Hasta luego el camino del Espania ! - Créé le 2011-03-13</a></li>"+
"<li><a id=\"carnetAffich2\" rel=\"external\" href=\"pagecarnetAffich.php\">Carnet de Quebec, 2011 - Ceci est premier voyage dans la Belle Province - Créé le 2011-03-14</a></li>"
);
});
});
... and the HTML page :
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Carnets de voyages</title>
<link rel="stylesheet" href="js/JQuery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/test_bug.js"></script>
<script type="text/javascript" src="js/JQuery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
- <!-- pageCarnets debut -->
<div data-role="page" data-theme="b" id="pageCarnets">
- <div data-role="header" id="hdrCarnets" data-theme="b">
<h1>Mes carnets de voyage</h1>
</div>
<div data-role="content" id="contentCarnets">
<ul data-role="listview" id="listviewCarnets" data-inset="true" data-theme="d" data-dividertheme="b">
<li data-role="list-divider">Actions</li>
<li><a href="#pageCarnetCreer">Créer un carnet</a></li>
<li data-role="list-divider">Les carnets</li>
<!-- Remplissage via JavaScript -->
</ul>
</div>
</div>
<!-- pageCarnets fin -->
- </body>
</html>
But when I use the data result of a locale database, the framework don't change the raw HTML injected by JavaScript in the HTML page :
- $(document).bind("mobileinit", function(){
$(document).ready(function() {
try {
if (window.openDatabase) {
bdd = openDatabase( "carnetsDeVoyages" , "1.0", "", 2000);
if (!bdd)
alert("Impossible d'ouvrir la bdd. Peut être un problème de version ou alors pas assez de quota d'espace disque disponible pour ce domaine.");
} else
alert("Impossible d'ouvrir la base de données. Merci d'essayer avec un autre navigateur.");
} catch(err) { }
function modeleListeCarnets(bdd) {
bdd.transaction(function(tx) {
tx.executeSql("select id,nom,description,date_creation from carnets", [],
function(tx, rs) {
if (rs.rows.length) {
rsResultat=new Array();
for(var i=0 ; i<rs.rows.length ; i++) {
rsResultat[rs.rows.item(i).id ] = rs.rows.item(i).nom +" - "+rs.rows.item(i).description+" - Créé le "+rs.rows.item(i).date_creation;
}
$.each(rsResultat , function(id,value) {
// debug : alert(id+" : "+value);
if(id>0) $('#listviewCarnets').append("<li><a id=\"carnetAffich"+id+"\" rel=\"external\" href=\"pagecarnetAffich.php\" title=\""+value+"\">"+value+"</a></li>");
});
}
},
function(tx, error) {
alert("Problème d'accès aux données : " + error.message);
return;
}
);
});
}
modeleListeCarnets(bdd);
});
});
Is this a strange limitation of HTML 5 ? Or is this a limitation of my programming ability (no, I can't seriously think that's the real truth) ?