[AJAX] propriété dynamique perdue dans une boucle FOR

Bonjour,

je créé en AJAX un menu comprenant entre autres les contenus de 10 balises <nom> provenant d'un fichier XML :

Code:

---

1 2 3 4 5

var donnees = requeteHttp.responseXML   for (var j = 0; j < 10; j++){ document.body.innerHTML += "<a href='#'>" + donnees.getElementsByTagName('nom')[j].firstChild.nodeValue + "</a>" }

---

or les index du menu ne sont pas toujours identiques aux index des balises <nom> correspondantes :
par exemple si mon menu comprenait déjà 3 liens <a>…
j'utilise donc une propriété dynamique indexDonnee pour mémoriser ceux-ci :

Code:

---

1 2 3 4 5 6 7 8

var donnees = requeteHttp.responseXML var menuLiens = document.getElementsByTagName('a') var indexMenu = 2 for (var j = 0; j < 10; j++){ document.body.innerHTML += "<a href='#'>" + donnees.getElementsByTagName('nom')[j].firstChild.nodeValue + "</a>" indexMenu++ menuLiens[indexMenu].indexDonnee = j }

---

en sortie de cette boucle, toutes mes indexDonnees sont UNDEFINED exceptée la dernière…

je sais que c'est un classique des boucles FOR normalement résolu avec les propriétés dynamiques,
mais, visiblement du fait que je construis mes <a> en AJAX, ça ne marche pas !

je me bats avec ça depuis 2 jours…
c'est trop con !…
je vais finir chauve !
HELP !!

merci d'avance ;)

Salut,

Code:

---

1 2	var menuLiens = document.getElementsByTagName('a')

---

Cette ligne copie les références vers les éléments de ton document dans
un tableau javascript, jusqu'ici pas de soucis.

Code:

---

1 2	document.body.innerHTML += ...

---

Cette ligne "sérialize" tout le contenu du body sous forme d'une chaine
html à laquelle est ajouté un fragment html (un nouveau lien) puis remplace
le contenu du body avec ce nouveau code html.

Cette opération recrée de nouveaux éléments DOM, les références dans
menuLiens correspondent à des éléments DOM qui n'existent plus dans
ton document.

Pour pallier à ce problème il ne faut pas passer par un innerHTML += ...
mais par document.body.appendChild(), voir aussi createElement et
createTextNode.

merci marcha.
c'est justement ce que je suis en train d'essayer !…
en attendant d'y arriver, je ne m'explique pas pourquoi mon indexDonnee est
bien affecté tant que je suis dans la boucle, et undefined dès que j'en suis sorti ! 8O

Citation:

---

Envoyé par spidflinch

je ne m'explique pas pourquoi mon indexDonnee est
bien affecté tant que je suis dans la boucle, et undefined dès que j'en suis sorti ! 8O

---

Montre le test que tu as fait pour observer ça, stp

j'ai placé 2 alertes :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var donnees = requeteHttp.responseXML var menuLiens = document.getElementsByTagName('a') var indexMenu = 2 for (var j = 0; j < 10; j++){ document.body.innerHTML += "<a href='#'>" + donnees.getElementsByTagName('nom')[j].firstChild.nodeValue + "</a>" indexMenu++ menuLiens[indexMenu].indexDonnee = j alert(indexMenu + ":" + menuLiens[indexMenu].indexDonnee) } alert(menuLiens[5].indexDonnee)

---

la première me donne bien la succession des affectations,
la 2e renvoie undefined…

ok, c'est bien la "sérialization" qui fout la m… ;
j'ai remplacé le contenu de ma boucle par

Code:

---

1 2 3 4 5 6

var lien = document.createElement('a') lien.setAttribute('href',"#") lien.innerHTML = p$$(donnees,'nom')[j].firstChild.nodeValue indexMenu++ document.body.appendChild(lien) menuLiens[indexMenu].indexDonnee = j

---

et ça marche !…

merci marcha !
;)