[JQuery] Arbre à plusieurs niveaux
Je veux construire un arbre dynamiquement. (pour ceux que ça aide, ça représente des sociétés, et pour chacune leurs filiales, sur plusieurs niveaux)
J'ai utilisé plusieurs méthodes qui bloquent toutes au même endroit, et je ne vois pas comment passer le problème.
1 - en premier lieu je charge une liste d'items, de niveau 1 (c'est coldfusion qui génère). ça ça marche bien
2 - quand je clique sur un petit "plus" à coté d'une feuille, je déplie. je vais chercher en ajax un fichier coldfusion "fils.cfm" qui me trouve les fils de la branche en cours. ça aussi ça marche.
3 - à ce moment, j'ai donc des branches de premier niveau, et des branches de second niveau. Les seconds niveau ont été chargées par ajax.
4 - quand je veux utiliser le petit "plus", au niveau deux, ça ne fonctionne pas. En fait il n'y a pas d'appel à ma fonction ajax
J'ai pour l'instant tenté avec plusieurs méthodes:
- getXhr() + innerHTML => ça affiche bien ce que je veux, mais le javascript ne fonctionne pas.
- jquery ($.ajax ou $.post) => ça affiche bien ce que je veux, mais le javascript ne fonctionne pas.
- getXhr() + createTextNode + appendChild => ça récupère les données, mais ça ne mets pas en forme
Je précise que mes données sont renvoyées formatées par mon fichier fils.cfm (un div, contenant d'autres div, avec les icones, évènements...).
Les différents topics que j'ai pu lire ici orientent vers le createElement. Mais je ne vois pas comment je peux l'utiliser dans mon cas.
Quand je l'utilise, je créé un div, puis je place mon texte reçu du getXhr() dedans, mais le html n'est alors pas interpreté.
Voici le js concernant le mode getXhr() + createTextNode + appendChild
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
| function addChild(idSoc){
var xhr = getXhr()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var montexte = document.createTextNode(xhr.responseText);
montexte.innerHTML = xhr.responseText;
document.getElementById("lev2_"+idSoc).appendChild(montexte);
}
}
xhr.open("GET","fils.cfm?idSoc="+idSoc,true);
xhr.send(null);
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non support par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
} |
