Afficher les éléments enfants avec AJAX

21 déc. 2008, 17:43

Bonjour,

Je viens de me mettre à l'AJAX version XML (pour l'instant je ne me servais que de la fonction responseText.) et bien sûr il y a encore des trucs que je ne comprends pas.
Je vous explique mon problème. Je génère sous PHP un XML suivant :

	   header ('Content-Type: text/xml');
	   $xml = "<menu>
<bouton>
<nom>Accueil</nom>
<lien>index.php</lien>
<title>Allez vers l'accueil</title>
</bouton>
<bouton>
<nom>Profil</nom>
<lien>index.php?affiche=profil</lien>
<title>Allez vers votre profil</title>
</bouton>
</menu>";
	   $xml = trim ($xml);
	   echo $xml;

Ce qui me donne un bon fichier XML :

Code : Tout sélectionner

<menu>
<bouton>
<nom>Accueil</nom>
<lien>index.php?</lien>
<title>Allez vers l'accueil</title>
</bouton>
<bouton>
<nom>Profil</nom>
<lien>index.php?affiche=profil</lien>
<title>Allez vers votre profil</title>
</bouton>
</menu>

J'essaye donc d'afficher un menu sous HTML pour obtenir ce qui suit :

Code : Tout sélectionner

<div class="ombre">
<div>
<a title="Allez vers l'accueil" href="index.php?"> Accueil </a>
</div>
</div>
<div id="active" class="ombre">
<div>
<a title="Allez vers votre profil" href="index.php?affiche=profil"> Profil </a>
</div>
</div>

J'ai donc créé un Javascript avec (je vous épargne XMLhttprequest...):

Code : Tout sélectionner

//assigne le premier element 
var xmlResponse = xmlHttp.responseXML;
	xmlRoot = xmlResponse.documentElement;
	
	//on créé les tableaux de réponse des boutons
	boutonArray = xmlRoot.getElementsByTagName("bouton");
	
	//on créé la sortie HTML
	var html = '<div id="menu">';
	for (var i=0 ; i<boutonArray.length; i++)
	{
		html += '<div class="ombre">';
      html += '<div><a href="' + boutonArray.item(i).firstChild.nodeValue + '" title="'+boutonArray.item(i).firstChild.nodeValue+'" >'+boutonArray.item(i).firstChild.nodeValue+'</a></div>';
		html += '</div>';
	}
	html += '</div>';

//on affiche la div
	divMenuXml = document.getElementById("menu_xml");
	divMenuXml.style.display = "block";
	divMenuXml.innerHTML = html;

Cela m'affiche bien les deux boutons mais rien dedans... Je crois que je me trompe dans la navigation de l'arborescence javascript<->XML
Quelqu'un peut-il me guider ?

EDIT : je métais trompé dans la ligne avec .firstChild.nodeValue. mais toujours pas résolue...

EDIT : J'ai en fait chercher un peu plus loin et ai remplacé par : cet exemple fonctionne mais n'est pas optimisé :

Code : Tout sélectionner

var html = '<div id="menu">';
	for (var i=0 ; i<boutonArray.length; i++)
	{	
	    	var titleName = boutonArray.item(i).childNodes[5].firstChild.data;
			var lienName = boutonArray.item(i).childNodes[3].firstChild.data;
			var nomName = boutonArray.item(i).childNodes[1].firstChild.data;
			html += '<div class="ombre" title="'+titleName+ '">';
			html += '<div><a href="' + lienName + '" >'+ nomName +'</a></div>';
			html += '</div>';

	}
	html += '</div>';

EDIT : J'ai finalement trouvé sur le site de Mozilla:
J'ai remplacé par

Code : Tout sélectionner

var titleName = boutonArray.item(i).getElementsByTagName("title").item(0).firstChild.data;
			var lienName = boutonArray.item(i).getElementsByTagName("lien").item(0).firstChild.data;
			var nomName = boutonArray.item(i).getElementsByTagName("nom").item(0).firstChild.data;

Afficher les éléments enfants avec AJAX

Qui est en ligne