[AJAX] J'aimerais que ma 3e liste déroulante se mette à jour instantanément avec la 2e

**beegees** · 21/11/2008, 11h47

Bonjour tout le monde,

J'ai lié trois listes déroulantes avec ajax.

La première liste déroulante contient par exemple :

BA1
BA2
BA3

Quand je choisis BA2, les cours de BA2 apparaissent dans la 2e liste déroulante par contre, la 3e liste déroulante avec les types ne bouge pas.

J'aimerais juste que la 3e liste déroulante se mette à jour en même temps que la 2e.

Sauriez-vous me dire qu'est-ce que je dois modifier dans mon code pour y arriver ?

Voici le code de la première liste déroulante, celle-ci n'est PAS alimentée via AJAX :

Code :

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
<?php 
        //include('connexion.php');
        $res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
        $query = mysql_query($res);
        $nbrow = mysql_num_rows($query);
        echo($nbrow);
?>
 
	<form>
		<select name='annee' id='annee' onChange='javascript:go(this.value)'>
			<option value='-1'> (1) Choisissez une année </option>
				<?php
                                        while($row = mysql_fetch_assoc($query))
                                        {
                                                echo "<option value='".$row["NOM_ANNEE"]."'>".$row["NOM_ANNEE"]."</option>";
                                        }
                                ?>
		</select>
 
 
	</form>
 
<!-- appel du code AJAX pour compléter la liste déroulante suivante -->
 
	<script language="javascript" src="Scripts/Ajax_Listes_Deroulantes_Generiques.js"></script>

La seconde liste déroulante est elle alimentée en AJAX :

Code :

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
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
	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;
	}
		// ... et ici il n'y a aucune valeur qui change pour le générique
 
	/**
	* Méthode qui sera appelée sur le changement de la liste déroulante annees
	*/
	function go(annee)
	{
		//alert(annee);
		var xhr = getXhr();
		//alert(xhr);
		// 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
			//alert(xhr.readyState);
			if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0 ) )
			{
				//alert('cool'); //cette alerte me permet de savoir qu'on arrive au moins à cet endroit du code
				//alert(xhr.status);
 
				//******  Je ne comprends pas comment le contenu de leselect est connu à cet endroit alors que xhr.open("POST","Scripts/ajaxLivre.php",true); se trouve                          plus bas 
				//*******
 
 
				leselect = xhr.responseText;
				//alert('xhr.responseText vaut '+xhr.responseText);
 
 
				//alert(xhr.responseText);
				//						alert(leselect);
				// On se sert de innerHTML pour rajouter les options a la liste
				document.getElementById('select_Nom_mnemonics').innerHTML = leselect; //ici, le nom du select devrait être générique !!!!
				//alert(leselect);
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","Scripts/ajaxLivre.php",true); //ici, on devrait rend ajaxLivre générique !!!!
		// 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 de l'auteur
		xhr.send("NOM_ANNEE="+annee); //ici, NOM_ANNEE et annee devraient être génériques !!!!			
	}

et via cette requête :

Code :

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
<?php
session_start();
//print_r($_POST);
        if(isset($_POST["NOM_ANNEE"]))
        {
 
                mysql_connect("localhost","root","mdp");
                mysql_select_db("deliberations");
                $res = mysql_query("SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['NOM_ANNEE'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'");
                //echo("SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'");
 
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["MNEMONIC"]."'>".$row["MNEMONIC"]."</option>";
                }
        }
?>

Par contre, comme je l'ai dis plus haut, la 3e ne bouge pas :

Code :

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
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
	function getXhr2()
	{
		//alert('salut');
		var xhr2 = null; 
		if(window.XMLHttpRequest) // Firefox et autres
			xhr2 = new XMLHttpRequest(); 
		else if(window.ActiveXObject)
		{ // Internet Explorer 
			try 
			{
				xhr2 = new ActiveXObject("Msxml2.XMLHTTP");
			} 
 
			catch (e) 
			{
				xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else 
		{ 	// XMLHttpRequest non supporté par le navigateur 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr2 = false; 
		} 
//		alert('ici '+xhr2);
		return xhr2;
	}
 
/**
	* Méthode qui sera appelée sur le changement de la liste déroulante annees
	*/
	function fnctcours(cours)
	{
		//alert(cours);
		var xhr2 = getXhr2();
	//	alert(xhr2);
		// On défini ce qu'on va faire quand on aura la réponse
		xhr2.onreadystatechange = function()
		{
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			//alert(xhr2.readyState);
			//alert(xhr2.status);
			if(xhr2.readyState == 4 && (xhr2.status == 200 || xhr2.status == 0 ) )
			{
				//alert('cool'); //cette alerte me permet de savoir qu'on arrive au moins à cet endroit du code
				//alert(xhr2.status);
 
				//******  Je ne comprends pas comment le contenu de leselect2 est connu à cet endroit alors que xhr2.open("POST","Scripts/ajaxLivre.php",true); se trouve                          plus bas 
				//*******
 
 
				leselect2 = xhr2.responseText;
 
 
				//alert('xhr2.responseText vaut '+xhr2.responseText);
				//						alert(leselect2);
				// On se sert de innerHTML pour rajouter les options a la liste
				document.getElementById('select_Nom_types').innerHTML = leselect2; //ici, le nom du select devrait être générique !!!!
				//alert(leselect2);
			}
		}
 
		// Ici on va voir comment faire du post
		xhr2.open("POST","Scripts/ajaxTypes.php",true); //ici, on devrait rend ajaxLivre générique !!!!
		// ne pas oublier ça pour le post
		xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// ne pas oublier de poster les arguments
		// ici, l'id de l'auteur
		xhr2.send("MNEMONIC="+cours); //ici, NOM_ANNEE et annee devraient être génériques !!!!			
	}

Code :

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
<?php
session_start();
//print_r($_POST);
        if(isset($_POST["MNEMONIC"]))
        {
                //echo($_POST["MNEMONIC"]);
                mysql_connect("localhost","root","mdp");
                mysql_select_db("deliberations");
                $res = mysql_query("SELECT Type_de_Cours FROM est_de_type WHERE Mnemonic = '" . $_POST["MNEMONIC"] . "'");
                //echo("SELECT Type_de_Cours FROM est_de_type WHERE Mnemonic = '" . $_POST["MNEMONIC"] . "'");
                $nombre = mysql_num_rows($res);
                //echo($nombre);
                
 
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Type_de_Cours"]."'>".$row["Type_de_Cours"]."</option>";
                }
        }
?>

Elle se modifie si je choisi une autre valeur dans la liste déroulante 2 mais le problème est que quand je n'ai qu'une valeur dans la liste déroulante 2, la liste déroulante 3 ne se met pas à jour, il met impossible de mettre à jour la liste de sélection 3 vue que je ne sais pas faire de changement dans la liste de sélection 2 (il n'y a qu'une seule valeur) et donc pas d'enclenchement de l'évènement "onChange" et donc pas de code AJAX.

Un tout grand merci d'avance pour l'aide.

beegees

**Bovino** · 22/11/2008, 08h46

Il faut que tu lances automatiquement ta fonction pour la 3e liste juste après avoir rempli ta 2e liste avec la valeur par défaut comme paramètre.

En revanche, ta fonction getXHR2 ne sert à rien, tu peux réutiliser getXHR qui te renverra un nouvel objet XMLHttpRequest !

**beegees** · 22/11/2008, 09h07

Envoyé par Bovino

Il faut que tu lances automatiquement ta fonction pour la 3e liste juste après avoir rempli ta 2e liste avec la valeur par défaut comme paramètre.

Salut Bovino,

Merci pour ta réponse.
Saurais-tu stp me dire où je dois lancer la fonction pour la 3e liste déroulante ? dans quel code ?

Comment récupérer une valeur par défaut et comment l'utiliser ?

En revanche, ta fonction getXHR2 ne sert à rien, tu peux réutiliser getXHR qui te renverra un nouvel objet XMLHttpRequest !

Pour ce qui est de getXHR2 j'en tiendrai compte, je vais modifier mon code au plus vitre.

Merci sincèrement pour ton aide.

bgs

**Bovino** · 22/11/2008, 09h42

Code :

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
function go(annee){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0 ) ){
			//******  Je ne comprends pas comment le contenu de leselect est connu à cet endroit alors que xhr.open("POST","Scripts/ajaxLivre.php",true); se trouve                          plus bas 
			//*******
			/* Réponse :
			Ce n'est pas l'endroit où le code est mis qui est important mais le moment où il est exécuté !
			Ici, cette fonction n'est appelée qu'au changement d'état de readyState, donc après l'exécution de xhr.open(), donc leseclect est connu !!!
			*/
			leselect = xhr.responseText;
			document.getElementById('select_Nom_mnemonics').innerHTML = leselect;
			// A ajouter (et adapter !) à ton code :
			var cours = document.getElementById('select_Nom_mnemonics').options[0].value;
			fnctcours(cours);
		}
	}
	xhr.open("POST","Scripts/ajaxLivre.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("NOM_ANNEE="+annee);
}

**beegees** · 22/11/2008, 18h39

Bonjour Bovino,

Un tout grand

pour ta réponse et pour les réponses dans les commentaires de mon code javascript.

Tout fonctionne maintenant parfaitement, j'ai donc 3 listes déroulantes liées (il me restera encore à lier la 4e mais je vais essayer de me débrouiller).

Encore un grand merci pour ton professionnalisme.

beegees

[AJAX] J'aimerais que ma 3e liste déroulante se mette à jour instantanément avec la 2e

JavaScript

Vue hybride

Discussions similaires

Partager

Partager