Limitation de JQuery Mobile avec HTML 5 ?
Avec une base de données HTML5, la conversion de html par le framework est incomplète
En effet, en testant plusieurs solutions, j'ai réalisé qu'une insertion d'élément <li> par la fonction $('element_html').append('texte à ajouter à l'élément') fonctionne très bien entre les closures prévues à cette effet :
Code:
1
2
3
4
5
6
7
|
$(document).bind("mobileinit", function(){ // On insère du code au chargement de JQueryMobile (pour parser correctement les enrichissements du framework)
$(document).ready(function() { // On attends que le DOM soit correctement charger pour y ajouter nos nouveaux éléments (enrichis)
[Mon code]
});
}); |
En revanche quand on insère des éléments qui proviennent d'une base de données locale utilisant les fonctions natives de HTML 5 rien ne fonctionne comme il le faudrait :
Le texte que je veux inséré est affiché comme du texte HTML brut, le framework n'aurait il pas assez de temps pour réussir à le transformer ? Ou bien est ce une autre limitation ??
Mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!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> |
Code JavaScript : la 1ère solution
Code:
1
2
3
4
5
6
7
8
9
|
$(document).bind("mobileinit", function(){ // On insère du code au chargement de JQueryMobile (pour parser correctement les enrichissements du framework)
$(document).ready(function() { // On attends que le DOM soit correctement charger pour y ajouter nos nouveaux éléments (enrichis)
$('#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>"
);
});
}); |
Code JavaScript : la 2ème solution
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$(document).bind("mobileinit", function(){ // On insère du code au chargement de JQueryMobile (pour parser correctement les enrichissements du framework)
$(document).ready(function() { // On attends que le DOM soit correctement charger pour y ajouter nos nouveaux éléments (enrichis)
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);
});
}); |
En ajoutant une fenêtre alert() avant la fin de code, ça marche, c'est bizarre quand même !
