2 listes liées avec la librairie Prototype

Logiciel & apps Programmation
1

Bonjour,
Ne parvenant pas à me débrouiller avec les requêtes ajax, j’ai essayé de suivre des tutos utilisant la librairie prototype.

Ce que je veux, c’est faire 2 listes liées dynamiquement.
Donc un premier select, qui amène à faire une requete ajax, qui amène sur un fichier php utilisant la valeur du 1er select, et renvoie une valeur à mettre dans le 2nd select.

Voilà ce que ça donne:
gambetta.cahors.free.fr…
C’est à dire pas grand chose!
J’ai l’impression qu’il y a 2 soucis:

  • le premier: la valeur choisie dans mon premier select n’est pas transmise dans le fichier .php
  • le second: le résultat n’est pas transmis dans le 2nd select.

J’ai fait un paquet des qq fichiers de mon prog:
gambetta.cahors.free.fr…

En voici qq extraits:
Le form dans le fichier principal index.php

 
 <form method = "post" name = "socle" action="socle.php"> 
		
		<p align = "center"> 
		<select   name="tb1" id="tb1"   size=1  onchange='requete_ajax();'>
			<?php
			for ($nb=0;$nb<$max;$nb++)
			{  $i=mysql_result($res,$nb,$table1_champ1);
			echo '<option>'.$i.'</option>';   
			}
			?>  
		</select>
		
		<select    name="eleve" id="emplacement"   size=1>  </select>
		
		</p>
				
		<p> </p>
        <p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>
 
</form>

Ma fonction requete_ajax:


function requete_ajax() {
 
var url = 'remplir2ndselect.php';
 
var parametres = 'tb1';//Les paramètres que l’on va fournir (par GET ou POST voir plus bas)
 
var myAjax = new Ajax.Updater( //Création d’une requête Ajax toute faite !)
 
'emplacement', //Le nom du div qui va recevoir les infos de la page php lancée
 
url, //url de la page lancée
 
{
 
method: 'get', //Méthode pour les paramètres (GET ou POST)
 
parameters: parametres //Paramètres rentrés plus haut
 
}
 
);
 
} //C’est tout !

Et le fichier php pour remplir le 2nd select:

 
<?php
   header('Content-type:text/html;charset=ISO-8859-1');
	
	include ('connexion.php');
	
	$table1='classe';
	$table2='socle';
	$table1_champ1='classe';
	$table2_champ1='classe';
	$table2_champ2='eleve';
	$choix1=$_GET['tb1'];
	
   $rch="WHERE $table2_champ1 ='" .$choix1. "'";
   $res=mysql_query("SELECT * FROM $table2 ".$rch);
   $max=@mysql_num_rows($res);
	$t="";
   for ($nb=0;$nb<$max;$nb++)
   {  $i=mysql_result($res,$nb,"$table2_champ2");
      $t.="\t".$i;   
	}	 
	echo $t;
	
	echo 'bonjour';
	
?>

Help
Edité le 23/12/2009 à 20:58

2

Bon, j’ai réussi à régler ce 1er problème, mais en est venu un autre: cela ne marche pas sous IE.

Le fichier index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Socle</title>
	<meta http-equiv="content-language" content="fr" />
	<meta http-equiv="content-Type" content="text/html;charset=iso-8859-15" />
	<meta name="robots" content="noindex" /> 

<script type="text/javascript" src="lib/prototype.js"></script>	
	
<script type="text/javascript" src="mesfonctions.js"></script>



</head>


<body>


<?php

	$table1='classe';
	$table2='socle';
	$table1_champ1='classe';
	$table2_champ1='classe';
	$table2_champ2='eleve';

  include ('connexion.php');
  
  $res=mysql_query("SELECT * FROM $table1");
  $max=@mysql_num_rows($res);
		?>
   

 <form method = "post" name = "socle" action="socle.php"> 
		<p align ="center" >Socle</p>
		<p> </p>
		<p align = "center"> 
		<select onChange="requete_ajax();" size="1" id="tb1" >
			<?php
			for ($nb=0;$nb<$max;$nb++)
			{  $i=mysql_result($res,$nb,$table1_champ1);
			echo '<option>'.$i.'</option>';   
			}
			?>  
		</select>
		
		<select   name="eleve" id="emplacement"   size=1>  </select>
		
		</p>
				
		<p> </p>
        <p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>

</form>


</body>

</html>

Le fichier .js où est fait la requête ajax:


function requete_ajax() {

var valeur = document.getElementById("tb1").value;


alert (valeur);
var parametres = 'classe='+valeur;
var myAjax = new Ajax.Updater( 'emplacement' , 'remplir2ndselect.php' , { method: 'get', parameters: parametres } ); 

}

Quel est le problème?
Le document.getElementById(“tb1”).value ne renvoie aucune valeur sous IE, alors qu’il renvoie la bonne valeur sous Firefox.
Je ne vois pas ce qui cloche…

3

J’ai trouvé!
Mon qui affiche les valeurs du 1er select n’a pas de valeur. Donc IE n’en tire rien.
En revanche firefox se débrouille pour tirer le text de l’option si l’option n’a pas de value.

Donc voilà la modif pour mon prog:
echo ‘<option value="’.$i.’">’.$i.’’;

voili voilo