[AJAX] Listes déroulantes : rafraichissement

Version imprimable

Bonjour,

Je suis étudiante en licence multimédia et je n'ai commencé que depuis octobre le HTML puis depuis janvier j'ai commencé à voir les langages PHP et Javascript et la technologie AJAX. Je me galère depuis deux semaines à trouver une solution pour 3 listes déroulantes. C'est très important pour moi, je suis toute seule et personne pour m'aider. Je lis des tutoriaux toute la journée mais j'ia du mal à tout saisir.
J'ai réussi à faire fonctionner mes listes en PHP. Mais j'ai également réussi à faire évoluer mes listes déroulantes en AJAX.

Mon problème est que la première fois tout fonctionne, mais si je sélectionne de nouveau dans la première liste, la seconde ne se recharge pas (ne rechargeant donc pas la troisième).

Je me dis qu'il me manque le bout de code qui dit "quand une autre formation est choisie, recharge la deuxième liste".
Quelqu'un pourrait-il m'aiguiller que je puisse m'améliorer ?
Savoir si je suis dans la bonne direction, faudrait-il rajouter une function ValideLd1 (j'ai essayé mais ça n'a pas marché non plus...)

Voici le code de la page ListeCP.php où les listes s'affichent :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<script type="text/javascript">
/**
 * Lister les lieux et dates d'une formation avec un objet
 * XMLHTTPRequest.
 */
/* Création des variables globales qui contiendront l'objet XHR */
var Ld1Id='';
var Ld2Id='';
var id_liste='';
 
function ValideLd2(val) {
   Ld1Id=val; //id_département
   id_liste='2';//Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
   var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
   ObjetXHR(LD_URL)
   // Réinitialisation de Ld3 si modification de LD1 après passage en Ld2
   if (Ld2Id!='') {ValideLd3('');   }
}
 
function ValideLd3(val) {
   Ld2Id=val; //id_commune
   id_liste='3'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
   var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
   if (Ld2Id=='') {var LD_URL = 'ValideLd3.php';}   
   ObjetXHR(LD_URL)
}
 
/**
 * Fonction privée qui va créer un objet XHR.
 * Cette fonction initialisera la valeur dans la variable globale définie ci-dessus.
 */
function ObjetXHR(LD_URL) {
   //creation de l'objet XMLHttpRequest
   if (window.XMLHttpRequest) { // Mozilla,...
   /* On tente de créer un objet XmlHTTPRequest */
      xmlhttp=new XMLHttpRequest();
      if (xmlhttp.overrideMimeType) {
         xmlhttp.overrideMimeType('text/xml');
      }   
      /* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
      xmlhttp.onreadystatechange=ChargeLd;
      /* Envoi de la requête à la page de traitement */
      xmlhttp.open("GET", LD_URL, true);
      xmlhttp.send(null);
   } else if (window.ActiveXObject) { //IE
   /* On tente de créer un objet XmlHTTPRequest */
      xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
      if (xmlhttp) {
      /* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
         xmlhttp.onreadystatechange=ChargeLd;
         /* Envoi de la requête à la page de traitement */
         xmlhttp.open('GET', LD_URL, false);
         xmlhttp.send();
      }
   }
   // Bouton non apparent car modification de LD1 ou Ld2
   document.getElementById('buttons').style.display='none';
}
 
// fonction pour manipuler l'appel asynchrone
function ChargeLd() {
/* Lorsque l'état est à 4 */
   if (xmlhttp.readyState==4) {
   /* Si on a un statut à 200 */
      if (xmlhttp.status==200) {
       /* Mise à jour de l'affichage */
         //span id="niv2" ou "niv3"
         document.getElementById('niv'+id_liste).innerHTML=xmlhttp.responseText;
         if (xmlhttp.responseText.indexOf('disabled')<=0) {
            //focus sur liste déroulante 2 ou 3
            document.getElementById('Liste'+id_liste).focus();
         }   
      }
   }
}
 
function Affiche_Btn() {
   document.getElementById('buttons').style.display='inline';
}
</script>

La partie PHP sur la même page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<form method="get" action="ListeCP.php">
 
    <span id="niv1">
    <?php include 'ValideLd1.php'; ?></span>&nbsp; <!--Pour remplir la liste déroulante 1-->
    <span id="niv2">
    <?php include 'ValideLd2.php'; ?></span>&nbsp; <!--Pour remplir la liste déroulante 2-->
    <span id="niv3">
    <?php include 'ValideLd3.php'; ?></span>&nbsp; <!--Pour remplir la liste déroulante 3-->
    <span id="buttons">
    <input type="submit" value="Valider">
    </span>
  </form>

La page ValideLd1.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?PHP
include("connexionbd.php");
$rq="Select id_formations,nom_formations from formation order by nom_formations";
$rq_pos_id=0; //position dans le SQL de la clé de la liste déroulante idem dans ValideLd2.php et ValideLd3.php
$rq_pos_val=1; //position dans le SQL de la valeur de la liste déroulante idem dans ValideLd2.php et ValideLd3.php 
 
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '<select name="Liste1" id="Liste1" size="1" onchange="ValideLd2(this[this.selectedIndex].value);">';
$retour .= '<option selected value="">Choisir...</option>';
if (mysql_num_rows($result) != 0) {
    while ($row = mysql_fetch_row($result)) {
        $retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
        }
        $retour .= '</select>';
} else {
    $retour = '<input id="size" type="text" size="10" value="Aucune valeur" disabled>';
}
mysql_free_result($result);
mysql_close($connexion);
echo $retour
?>

La page ValideLd2.php :

Code:

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
28
29
30
 
<?PHP
include("connexionbd.php");
 $Ld1_retour =''; //id_département clé de la liste déroulante 1
 
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
 
if ($Ld1_retour!='') {
    $rq="Select* from date_formations where id_formations='".$Ld1_retour."' order by date_date";
    $rq_pos_id=0;
    $rq_pos_val=1;
    $result= mysql_query ($rq) or die ("Select impossible");
    $retour = '<select name="Liste2" id="Liste2" size="1" onchange="ValideLd3(this[this.selectedIndex].value);">';
    $retour .= '<option selected value="">Choisir...</option>';
 
    if (mysql_num_rows($result) != 0) {
        while ($row = mysql_fetch_row($result)) {
            $retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
        }
        $retour .= '</select>';
    } else {
        $retour = '<input id="Liste2" type="text" size="10" value="Aucune valeur" disabled>';
    }
    mysql_free_result($result);
    mysql_close($connexion);
}else{
    $retour = '<select name="Liste2" id="Liste2" size="1" disabled><option>Aucune valeur</option></select>';
}    
echo $retour
?>

La page ValideLd3.php :

Code:

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
28
29
30
31
32
33
 
<?PHP
include("connexionbd.php");
 
$Ld1_retour =''; //id_département clé de la liste déroulante 1 
$Ld2_retour =''; //id_commune clé de la liste déroulante 2    
 
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour =  $_GET['Ld2'];}
 
if (($Ld1_retour!='')&&($Ld2_retour!='')) {
    $rq="Select lieu_date from date_formations where id_formations='".$Ld1_retour."' AND id_date='".$Ld2_retour."' order by lieu_date";
    $rq_pos_id=0;
    $rq_pos_val=0;
    $result= mysql_query ($rq) or die ("Select impossible");
    $retour = '<select name="Liste3" id="Liste3" size="1" onchange="Affiche_Btn();">';
    $retour .= '<option selected value="">Choisir...</option>';
 
    if (mysql_num_rows($result) != 0) {
        while ($row = mysql_fetch_row($result)) {
            $retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
        }
        $retour .= '</select>';
    } else {
        $retour = '<input id="Liste3" type="text" size="10" value="Aucune valeur" disabled>';
    }
    mysql_free_result($result);
    mysql_close($connexion);
}else{
    $retour = '<select name="Liste3" id="Liste3" size="1" disabled><option>Aucune valeur</option></select>';
}    
echo $retour
?>

J'espère que vous pourrez au moins m'aiguiller un peu ça serait sympa !
En tout cas, merci de votre aide !

Bonjour,

Bon me revoilà, j'ai repris le code sur les livres et auteurs http://siddh.developpez.com/articles/ajax/#LIV-A. D'ailleurs qui est un excellent tutorial.
J'ai voulu rajouter une 3ème liste, mais malheureusement, elle ne se charge pas.

Je ne demande pas de réponse toute faite, mais comprenez ça fait plus de deux semaines que je suis dessus...S'il-vous-plait de l'aide :cry:

Voici une partie de mon formulaire dans lequel il y a mes trois listes déroulantes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="corps">
<form method="POST" name="formulaire" action="inscription1.php" onsubmit="return validateForm(this)">
<div id="titreForm">Inscription à une formation</div>
<div id="corpForm">
	<fieldset id="formation">
		<legend>Formation</legend>
			<br />
			<p>
				<label for="forma" title="Veuillez sélectionner la formation souhaitée" class="oblig">*Formation souhaitée :</label>
				 <? include 'liste-formations2.php'; ?>
			</p>
			<p>
				<label for="date_forma" title="Veuillez sléectionner la date souhaitée" class="oblig">*Date:</label>
				 <span id="date_form" style='display:inline'>
				 <? include 'liste-dates2.php'; ?>
 
				 </span>
			</p>
			<p>	
				  <label for="ref_forma" title="Veuillez saisir le lieu souhaité" class="oblig">Lieu :</label>
				  <span id="lieu_form" style='display:inline'>
    			<? include 'liste-lieux2.php'; ?>
				 </span>
			</p>

Voici mes fonctions AJAX :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
 
 
			///// relation formation-date //////
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function getDatte(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste en utilisant l'id du span
						document.getElementById('date_form').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","liste-dates2.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id du select de la formation
				sel = document.getElementById('formations');
				idForma = sel.options[sel.selectedIndex].value;
				xhr.send("id_formations="+idForma);
			}
 
 
 
 
			///// relation date-lieu //////
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function getLieu(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste en utilisant l'id du span
						document.getElementById('lieu_form').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","liste-lieux2.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id du select de la date
				sel = document.getElementById('date_for');
				idDatte = sel.options[sel.selectedIndex].value;
				xhr.send("id_date="+idDatte);
			}

Puis ma page liste-formations2.php :

Code:

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
// include("connexionbd.php");
// Variables de connexion : ajustez ces paramètres selon votre propre environnement 
/* */$serveur = "localhost";
$user   = "root";
$mdp     = "";
$base    = "agilicom"; 
 
$connexion = mysql_connect($serveur, $user, $mdp) or die ("Connexion au serveur impossible");
if (!$connexion) {
	die('Could not connect: ' . mysql_error());
}
$choixbase = mysql_select_db($base, $connexion);
?>
 
<select name='forma' id='formations' onchange='getDatte()'>
<option value='-1'>Formations</option>
<?php
$sql = "SELECT id_formations, nom_formations
                FROM formation
                ORDER BY nom_formations";
$res = mysql_query ($sql) or die ("Exécution de la requête impossible");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row['id_formations']."'>".$row['nom_formations']."</option>";
}
?>
</select>

Ma page liste-dates2.php :

Code:

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
28
29
30
31
32
<?PHP
// include("connexionbd.php");
// Variables de connexion : ajustez ces paramètres selon votre propre environnement 
/* */$serveur = "localhost";
$user   = "root";
$mdp     = "";
$base    = "agilicom"; 
 
echo "<select name='date_formation' id='date_for' onchange='getLieu()'>";
if(isset($_POST["id_formations"])){
 
$connexion = mysql_connect($serveur, $user, $mdp) or die ("Connexion au serveur impossible");
if (!$connexion) {
	die('Could not connect: ' . mysql_error());
}
 
$choixbase = mysql_select_db($base, $connexion);
 
$res = mysql_query("SELECT*
					FROM date_formations
					WHERE id_formations= '".$_POST["id_formations"]."'
					ORDER BY date_date");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_date"]."'>".$row["date_date"]."</option>";
}
}
else
echo "<option value='-1'>Choisir une date</option>";
echo "</select>";
 
 
?>

Enfin ma page liste-lieux2.php :

Code:

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
28
29
30
31
32
33
34
35
<?PHP
// include("connexionbd.php");
// Variables de connexion : ajustez ces paramètres selon votre propre environnement 
/* */$serveur = "localhost";
$user   = "root";
$mdp     = "";
$base    = "agilicom"; 
 
 
 
	// Affichage du lieu
echo "<select name='lieu_formation'>";
if(isset($_POST["id_formations"])&& isset($_POST["id_date"])){
 
 
$connexion = mysql_connect($serveur, $user, $mdp) or die ("Connexion au serveur impossible");
if (!$connexion) {
	die('Could not connect: ' . mysql_error());
}
$choixbase = mysql_select_db($base, $connexion);
 
$res = mysql_query("SELECT*
					FROM date_formations
					WHERE id_formations='".$_POST["id_formations"]."'
					AND id_date='".$_POST["id_date"]."'
					ORDER BY lieu_date");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_date"]."'>".$row["lieu_date"]."</option>";
}
}
else
echo "<option value='-1'>Choisir un lieu</option>";
echo "</select>";
 
?>

Please help me !:cry:

Bon alors ça marche mieux...Il me manquait le passage du deuxième paramètre...
Mais j'ai encore un souci : lorsque je sélectionne une formation, ça me met direct la date, et non <-- choisir une date -->, ce qui fait que le lieu ne change que si j'ai plusieurs dates et que je clique sur une autre de ses dates, si je n'ai qu'une date alors le lieu ne change pas...Faut que je continue à chercher...Mais juste une orientation m'aiderait pour m'indiquer où chercher...
Au fait voilà ce que j'ai modifié dans ma deuxième fonction dans listeDeroulanetAJAX.js :
Code:

1 2 3 4 sel = document.getElementById('date_for'); idDatte = sel.options[sel.selectedIndex].value; var data = ("id_formations="+idForma+"&id_date="+idDatte) ; xhr.send(data);

Mes trois listes fonctionnent !!! J'ai changé la place de l'option avec valeur null dans la page liste-dates.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<select name='date_formation' id='date_for' onchange='getLieu()'>
<option value='null'>Choisir une date</option>
<?php 
if(isset($_POST["id_formations"])){
 
 
$res = mysql_query("SELECT*
                                        FROM date_formations
                                        WHERE id_formations= '".$_POST["id_formations"]."'
                                        ORDER BY date_date");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_date"]."'>".$row["date_date"]."</option>";
}
}?>
</select>

Maintenant il me reste un souci, je ne récupère pas la valeur de ma liste formation car dans mon formulaire ce champ doit être rempli et j'ai la page de validation qui m'indique que je n'ai pas saisi de formation...Je continue à chercher...Question d'habitude !

28/06/2007, 13h58
Tximiti

J'ai trouvé une erreur ! Il me reste encore du boulot car maintenant je ne reçois plus mon formulaire par mail..Mais bon on peut dire que le sujet est résolu.