Limitation de JQuery Mobile avec HTML 5 ?

**youtch** · 28/03/2011, 14h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !