Discussion :

[miloozer]

Bonjour,

Je me tourne vers vous suite à un problème que je rencontre lors de l'utilisation de JQuery.

Je dois réaliser une arborescence concernant des personnes c'est à dire:

- J'ai 3 groupes de personnes

- Chaque groupe contient un certain nombres d'individus

- Un individu ne peut appartenir qu'a un seul groupe

J'ai recherché un plugin JQuery et je suis tombé sur cet exemple qui m'a paru très accessible.

Lors de l'utilisation je n'ai pas de problèmes.

J'ai voulu rendre l'utilisation de cet arbre un peu plus dynamique : au clic sur un champ texte j'envoie donc une requete Ajax sur mon serveur. Le serveur me génère un JSON que je réceptionne parfaitement. Je précise que je travaille avec les servlets. Ce JSON contient les nom des individus et est de la forme suivante (dixit Firebug):

Code :

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

[{"nom":" Benoit"},{"nom":"Patrice"},{"nom":"Mickael"}]

Ci dessous le code de ma requete AJAX:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$.ajax({
    url : "ChargerArbre",
    type : "GET",
    dataType : "json",
    success : function(data) {
        $("#new").append("<ul><li class='parent'><a> TOUS</a><ul>"
+"<li class='parent'><a>Groupe_Dev</a><ul>");
 
$("#new").append("<li><a>"+data[0].nom+"</a></li>");//Ne fonctionne pas<br><br>

Ce code ci-dessus ne fonctionne pas comme il devrait. La construction de mon arbre est complètement foirée ( par foirée j'entends non homogène : les valeurs du JSON sont bien récupérées mais l'affichage est inutilisable --> J’obtiens donc quelque chose d'inexploitable)

Toutefois le code suivant fonctionne bien (mais ne me donne que le nom de la première personne présente dans mon fichier JSON...Donc adieu le dynamisme

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
                    url : "ChargerArbre",
                    type : "GET",
                    dataType : "json",
                    success : function(data) {
                        $("#new").append(
                                "<ul><li class='parent'><a> TOUS </a><ul>"
                                +"<li class='parent'><a>Groupe_Dev</a><ul>"
                                +"<li><a>"+data[0].nom+"</a></li>"
                                );
                    }
            });

Quelqu'un aurait t'il une solution à m'apporter ou une explication à me fournir ??

J'ai l'impression que le souci vient du $("#new").append(....)
Si il est en 2 parties (comme dans le premier code que j'ai donné ) la construction de mon arbre est inexploitable

Si en revanche je fais mon $("#new").append(....) d'un seul coup (cf le code que j'ai fourni et qui fonctionne) j'obtiens quelque chose de correct et conforme à mes attentes mais je ne peux plus/sais plus faire de boucle pour construire mon arbre avec mon JSON....

Je tiens à préciser que je travaille avec des servlets et qu'il n'y a aucun plugin JQuery qui entre en conflit ou quoi que ce soit d'autres.

En vous remerciant par avance pour votre attention.

[Bovino]

Rien que de très normal...
Dans ton premier exemple, tu insères une balise <ul> dans l'élément #new

Code :

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

1
2
$("#new").append("<ul><li class='parent'><a> TOUS</a><ul>"
+"<li class='parent'><a>Groupe_Dev</a><ul>");

Puis tu insères une balise <li> dans l'élément #new

Code :

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

$("#new").append("<li><a>"+data[0].nom+"</a></li>");

Sauf que la balise <li>, c'est dans la balise <ul> qu'il faut l'insérer !

[miloozer]

Bonjour,

Merci pour ta réponse.

J'ai testé selon tes recommandations et le résultat n'est pas probant...
J'ai mis à jour mon code (Pour Info gestionnaire correspond au champ texte sur lequel je clique(et qui envoi la requete ajax) et new est l’arborescence que j'essaie de construire):

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
40
41
42
<script type="text/javascript">
$("#gestionnaire")
	.click(
		function() {
			$.ajax({
				url : "ChargerArbre",
				type : "GET",
				dataType : "json",
				success : function(data) {
					console.log(data);
					/*Génération du début de l'arborescence*/
					$("#new").append("<ul><li class='parent'><a> TOUS </a><ul>" + "<li class='parent'><a>Groupe_Dev</a><ul><li>");
					//+"<a>"+data[0].nom+"</a></li>"); Cette ligne fonctionne
					/*On ajoute les noms renvoyés par le JSON*/
					for ( var x = 0; x < data.length; x++) {
						if (x == 0) {
							nom = "<a>" + data[x].nom + "</a></li>";
							console.log(nom);
							$("#new").append(nom);
						} else {
							nom = "<li><a>"+ data[x].nom+ "</a></li>";
							console.log(nom);
							$("#new").append(nom);
						}
					}
					/*Pour terminer l'arborescence*/
					$("#new").append("</ul></li></ul> </li></ul>");
				}
			});
			/*Code permettant de dérouler notre arborescence (fourni par le concepteur)*/
			$('#new li').each(function() {
				if ($(this).children('ul').length > 0) {
					$(this).addClass('parent');
				}
			});
			$('#new li.parent > a').click(function() {
				$(this).parent().toggleClass('active');
				$(this).parent().children('ul')
				.slideToggle('fast');
			});
		});
</script>

Mais cela ne marche pas...Les nom sont bien récupérés et affichés mais ne font pas partie de l’arborescence...Au lieu d'avoir:
TOUS
|--Groupe DEV
|----Benoit
|----Patrice
|----Mickael

J'ai:
TOUS

• Benoit
• Patrice
• Mickael

Je cherche toujours ou est mon erreur....Si vous avez des solutions a proposer n'hésitez pas !!
Cordialement.

[Lorenzo77]

salut,

tu devrais montrer le résultat des UL et LI imbriqués, je suis sur qu'il est encore mal foutu !
ton if ne sert a rien dans la boucle for .. ceci doit suffire :

Code :

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

nom = "<li><a>" + data[x].nom + "</a></li>";

il te faut virer l'ouverture du LI précédent !

Code :

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

+ "<li class='parent'><a>Groupe_Dev</a><ul><li>");

par

Code :

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

+ "<li class='parent'><a>Groupe_Dev</a><ul>");

ps : évite les append en séries, c'est + propre et beaucoup + rapide de créer un var qui contient tous l'HTML et de l'ajouter au DOM a la fin !
ps : ton code est illisible, calme toi sur les tabulations

[Bovino]

J'ai testé selon tes recommandations

Pardon ?
Quand je vois des trucs du style

Code :

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

$("#new").append("<ul><li class='parent'><a> TOUS </a><ul>" + "<li class='parent'><a>Groupe_Dev</a><ul><li>");

puis

Code :

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

1
2
nom = "<a>" + data[x].nom + "</a></li>";
$("#new").append(nom);

Je ne crois pas non...

[miloozer]

Désolé Bovino j'avais mal compris ce que tu m'avais suggéré....
J'ai trouvé une solution qui fonctionnait pour ce problème...Encore merci pour votre aide à toi et lorenzo.

Je sollicite maintenant vos conseils plus sur une partie algorithmique que sur le code .

Comme je l'ai dit dans mon premier post je dois avoir des groupes de personnes. Chaque groupe contient plusieurs individus mais un individu n'appartient qu'a un seul groupe.

En conséquence mon JSON est légèrement modifié:

Code :

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

1
2
 
[{"nom":"Benoit","groupe":"groupedev"},{"nom":"Patrice","groupe":"groupedev"},{"nom":"Francis","groupe":"groupedev"},{"nom":"Mickael","groupe":"groupeconsul"},{"nom":"Christine","groupe":"groupequalite"}]

Je souhaite maintenant réalisé une arborescence avec les groupes et les personnes appartenant à ces groupes.

J'avais pensé à cette solution:
DEBUT
(pour x=0; x< longeur du JSON; x++)

SI c'est mon premier tour de boucle
---> Je crée un nouveau groupe et j'ajoute la personne
SINON
---->Je regarde si mon groupe actuel est différent du groupe précédent
-------->Si oui
------------->Je crée un nouveau groupe et j'ajoute la personne
-------->Si non
--------------> Cela signifie qu'actuellement la personne appartient au même groupe donc je l'ajoute
FIN

Cependant cet algo ne fonctionne pas : je possède des doublons.
Par exemple dans mon premier groupe de personne, je vais trouver les deux groupes suivants comme si ils faisaient parti du premier(alors qu'ils devraient être au même niveau...Je ne sais pas si je suis clair)

J'espère que vous pourrez me venir en aide car je galère vraiment sur cette partie là, et je vous remercie par avance de votre attention.

[Bovino]

Le plus simple serait surement de modifier la structure de ton JSON à la base.
Tu devrais avoir pour clés de l'objet les différents groupes et pour valeur de ces clés un tableau représentant les personnes de ce groupe.