Discussion :

[spidflinch]

Bonjour,

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

Code :

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

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 :

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

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

[marcha]

Salut,

Code :

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

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 :

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

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.

[spidflinch]

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 !

[marcha]

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 !

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

[spidflinch]

j'ai placé 2 alertes :

Code :

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

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…

[spidflinch]

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

Code :

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

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 !