Discussion :

[skflers61]

Bonjour,

J'utilise plusieurs listes déroulante (listes liées en ajax) et après ma dernière liste je voudrais afficher un tableau avec les données de toutes mes listes.

Pour mes listes liées, je génère du code xml avec XMLHttpRequest et je me demandais quel serait le format de fichier le plus adapté pour faire mon tableau en ajax (texte, XML, HTML,Json).

ps: je ne connais pas vraiment JSON.

Merci pour vos réponse.

[skflers61]

J'ai décidé de partir sur du code xml pour générer mon tableau.

Par contre j'ai un petit soucis au niveau du traitement du code xml retourné, je m'explique:

Tout d'abord, voici le code de ma dernière liste déroulante(qui est rempli grâce à la liste déroulante précédente):

Code html :

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

1
2
3
4
<!--liste déroulante produit-->
<label>Produit: </label>
<select id="produit" onchange="requestResultat(this);" style="width:430px">
</select>

Code très basique . Ensuite c'est ma fonction requestResultat(this) qui prend le relais:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function requestResultat(oSelect , id) {
        CODE_TYP = oSelect.options[oSelect.selectedIndex].value; //CODE_TYP correspond au choix de la liste déroulante
        var param = "CODE_OR=" + CODE_OR + "&CODE_FON=" + CODE_FON + "&CODE_PROD=" + CODE_PROD  + "&CODE_TYP=" + CODE_TYP +"&id="+oSelect.id;//toutes mes variables globales.
        retour = document.getElementById("TABLEAUgammeM");//TABLEAUgammeM correspond au div dans lequel je voudrais afficher mon tableau et retour est une variable globale
        var xhr   = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readDataResultat(xhr.responseXML);
                }
	};
	xhr.open("POST", "Modele/resultatListe.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(param);
}

Ensuite je génère mon xml dans le fichier resultatListe.php. (j'ai allégé un peu le code en supprimant la déclaration de classe,etc.. )
ps: ma fonction executerRequete() vient d'une autre classe et elle marche sans pb.

Code php :

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
<?php
header("Content-Type: text/xml");
echo "< ?xml version=\"1.0\" encoding=\"utf-8\"? >"; // Espaces ajoutés pour préserver la coloration syntaxique
echo "<TABLE BORDER='1'>";
echo "<TR>";
echo "<TH> Nom PROCESS </TH>";
echo "<TH> Nom GAMME DE MESURE</TH>";
echo "<TH> Poste </TH>";
echo "<TH> Code produit </TH>";	
echo "</TR>";
if( (isset($_POST["CODE_OR"])) & (isset($_POST["CODE_FON"])) & (isset($_POST["CODE_PROD"])) & (isset($_POST["CODE_TYP"])) &  (isset($_POST["id"]))   ){
	$projet=$_POST["CODE_OR"];
	$finalite=$_POST["CODE_FON"];
	$famille=$_POST["CODE_PROD"];
	$produit=$_POST["CODE_TYP"];
	$sql="select NOM_GEX,NOM_GME,CODE_PO,CODE_TYP from ENTETES_CARTES_PAPIER where CODE_OR ='".$projet."' and CODE_FON ='".$finalite."' and CODE_PROD ='".$famille."'  and CODE_TYP ='".$produit."' ";
	$reponse = $this->executerRequete($sql);
	foreach ($reponse as $key):
		echo "<TR>";
		echo "<TD id=\"GEX\" name=\"GEX\">".$key['NOM_GEX']."</TD>";
		echo "<TD id=\"GME\" name=\"GME\">".$key['NOM_GME']."</TD>";
		echo "<TD id=\"PO\" name=\"PO\">".$key['CODE_PO']."</TD>";
		echo "<TD id=\"TYP\" name=\"TYP\">".$key['CODE_TYP']."</TD>";
		echo "</TR>";
	endforeach ;
	echo "</table>";
}

Mon problème est dans le traitement de ce fichier XML dans ma fonction js readDataResultat().
Ici je ne sais pas vraiment comment faire le traitement du XML.

Voici ce que j'ai pour la focntion readDataResultat(), j'ai essayer d'adapter depuis la fonction readData() que j'utilise pour mes listes déroulante mais là je suis un peu perdu.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function readDataResultat(oData) {
	var nodes   = oData.getElementsByTagName("TD");
	var oOption, oInner;
	retour.innerHTML = "";
	for (var i=0, c=nodes.length; i<c; i++) {
		oOption = document.createElement("TABLE");
		oInner  = document.createTextNode(nodes[i].getAttribute("name"));
		oOption.value = nodes[i].getAttribute("id");
		oOption.appendChild(oInner);
		retour.appendChild(oOption);
	}
}

J'ai l'erreur suivante, à la ligne 332 qui la première ligne de ma fonction, c.a.d "var nodes = oData.getElementsByTagName("TD");":

Cannot call method 'getElementsByTagName' of null

J'ai besoin d'un petit coup de pouce pour ma fonction readDataResultat().

PS: Voici le code XML généré:

Code html :

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
<?xml version="1.0" encoding="utf-8"?>
<TABLE BORDER='1'>
	<TR>
		<TH> Nom PROCESS </TH>
		<TH> Nom GAMME DE MESURE</TH>
		<TH> Poste </TH>
		<TH> Code produit </TH>
	</TR>
	<TR>
		<TD id="GEX" name="GEX">111</TD>
		<TD id="GME" name="GME">222</TD>
		<TD id="PO" name="PO">333</TD>
		<TD id="TYP" name="TYP">444</TD>
	</TR>
	...
</TABLE>

merci pour vos réponses