4 listbox multicriteres liées et dynamiques

Petit nouveau ! | 1 Messages

01 août 2006, 14:39

Dans la partie javascript/Ajax:

Je dois raffraichir 4 listbox qui sont dépendantes suivant le resultat de requetes SQL, je crée donc 4 objets XMLHttpRequest:
//
			if (window.XMLHttpRequest) //Firefox
			{
				oXmlhttp1 = new XMLHttpRequest();
				oXmlhttp2 = new XMLHttpRequest();
				oXmlhttp3 = new XMLHttpRequest();
				oXmlhttp4 = new XMLHttpRequest();
			}
			else if (window.ActiveXObject) //IE
			{
				oXmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
				oXmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
				oXmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
				oXmlhttp4 = new ActiveXObject("Microsoft.XMLHTTP");
			}
Ensuite mes fonctions de recherches:
<?php //
			function search(clef,f) 
			{
				oXmlhttp1.open('POST','<?php echo $_SERVER['PHP_SELF'];  ?>','TRUE');
				oXmlhttp1.onreadystatechange=function() 
				{
					if (oXmlhttp1.readyState==4 && oXmlhttp1.status == 200) 
					{
						document.body.innerHTML = oXmlhttp1.responseText;
					}
				}
				oXmlhttp1.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				var data = 'liste1='+clef
	
				oXmlhttp1.send (data);
				
				//J'aimerais garder la selection dans ma liste box, mais rien a faire !!!!! l'item se déselectionne !
				f.options[f.selectedIndex].selected='true';
			}
De même pour search2, search3 et search4 avec les objets: oXmlhttp2, oXmlhttp3, oXmlhttp4

Dans la partie Serveur(XHTML/PHP5), je dispose du formulaire suivant:
<?php /* */ ?>
<html>
	<head>
		<title>AjaxTextBox</title>
		<script> ... //mes script (dont celui ci-dessus)</script>
	</head>
	<body>
		<form method="post">
		<select name="liste1" onchange="search(this.value,this);" MULTIPLE size="3">
		<?php
			//************************************************************************************************************************************
			//Je me connecte a la base de donnée, et je fais une simple requete:
			$db = pg_connect("host=localhost port=5432 user=pwasmer password=pwasmer dbname=AGRUMES");
			$result = pg_exec($db, "SELECT nom FROM station");	
			
			$i=0;
			//J'enregistre le resultat dans ma premiere listbox
			while ($row = pg_fetch_row($result))
			{
				echo '<option id=$i>"'.$row[0].'"</option>';
				$i++;
			}	
			print("</select>");
			
			//************************************************************************************************************************************
			
			//on recupere le nom selectionné
			$var=$_POST['liste1'];
			$var=substr($var,2,$var.length-2);
			if ($var==null)
			{
				$var="%";
			}
	
			//on cherche un resultat a partir de la requete precedente
			$result1 = pg_exec($db, "SELECT nom_latin,id FROM especes WHERE id_station in (SELECT id FROM station WHERE nom like  '$var')");

			$i=0;
			
			//Je remplis la seconde listbox
			
			print("<select name=\"liste2\" onchange=\"search2(this.value,this);\"  size=\"3\" MULTIPLE >");
			while ($row1 = pg_fetch_row($result1))
			{
				print("<option id=\"$i\">$row1[0]</option>");
				$i++;
			}	
			print("</select>");
			
			//************************************************************************************************************************************
			
			//on recupere le choix utilisateur de la seconde listeBox
			$var2=$_POST['liste2'];
	
			if ($var2==null)
			{
				$var2="%";
			}
			
			//Requete dependant du choix des 2 listbox
			$result2 = pg_exec($db, "SELECT nom FROM varietes WHERE id_espece in (SELECT id FROM especes WHERE nom_latin like  '$var2') ");
			
			print("<select name=\"liste3\" onchange=\"search3(this.value,this);\" MULTIPLE size=\"3\" >");
			//echo '<option id=\"0\">a</option>';
			
			$i=0;
			while ($row2 = pg_fetch_row($result2))
			{
				echo '<option id=$i>"'.$row2[0].'"</option>';
				$i++;
			}	
			print("</select>");
		
		//***************************************************************************
		
		//on ferme la connection
		pg_close($db);
		
		</form>
	</body>
</html>
Plusieurs problemes:
-> J'arrive pas a garder la selection lorsqu'un utilisateur clique sur un choix.
-> Quand on clique sur la deuxieme listbox, la troisieme se met bien a jour avec les bonnes valeurs, mais la seconde listbox est effacée.
Quelqu'un aurait-il une idée ?

Edité par naholyr (remise en forme et coloration)

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

02 août 2006, 13:07

Y a pas mal de choses que je ne comprend pas... pourquoi faire 4 objets request et 4 fonction search, alors que tu pourrais n'en faire qu'une et passé un paramètre supplémentaire pour spécifier la liste à actualiser ?

Pourquoi également à chaque fois réactualiser toute la page et pas simplement la liste concernée ? Y a plus d'intérêt à utiliser Ajax du coup :)

Quoi qu'il en soit, ton problème vient de là, à chaque fois que tu appelles une fonction search() tu ne passes pas les valeurs des autres select, du coup au rechargement aucune valeur n'est sélectionnée par défaut, et ta commande js ne peut rien faire (tu récupères une valeur qui n'est plus sélectionnée). Il faudrait stocker les valeurs avant de faire l'appel au send et les utiliser ensuite pour remettre à jour une fois la page rechargée.. mais à ta place j'essayerais de voir comment optimiser un peu tout ça et ne recharger que ce qui m'intéresse :)