[AJAX] J'aimerais lier ma première liste déroulante avec la seconde

**beegees** · 19/11/2008, 19h12

Salut les développeurs,

J'aimerais créer une page avec 4 listes déroulantes liées.

J'ai une première liste déroulante qui s'alimente correctement, je ne pense pas que le code AJAX dans ma page n'est pas utile pour l'alimentation de ma liste déroulante, vous pouvez me confirmer cela svp ? :

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
70
71
72
73
74
<?php 
                        include('connexion.php');
                        
$res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
//echo($res);
$query = mysql_query($res);
 
 
                        $nbrow = mysql_num_rows($query);
                        echo($nbrow);
        ?>
		<script type='text/javascript'> 
				<script type='text/javascript'>
 
			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;
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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
						document.getElementById('Mnemonic').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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 de l'auteur
				sel = document.getElementById('annee');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("ID="+ID);
			}
		</script>
 
 
 
		<form>
				<select name='annee' id='annee' onchange='go()'>
					<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>

Je voudrais commencer par lier la première liste déroulante nommée "annee" avec la seconde liste déroulante qui est nommée "select_Nom_mnemonics" et donc voici le code pour l'AJAX :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='select_Nom_mnemonics'>";
	if(isset($_POST["ID"])){
		mysql_connect("localhost","root","mdp");
		mysql_select_db("deliberations");
		$res = mysql_query("SELECT ID,NOM_ANNEE FROM annees 
			WHERE ID=".$_POST["ID"].");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["ID"]."'>".$row["ID"]."</option>";
		}
	}
	echo "</select>";
?>

Ce que devrais afficher la liste déroulante "select_Nom_mnemonics" c'est le nom des cours par rapport à l'année choisie dans la liste déroulante "annee" et aussi dans lequel le Professeur donne cours (par rapport à son matricule).

Pour cela, j'ai cette requête qui pourrait être utilisée :

Code :

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

$sql_Nom_Cours = "SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'";

Je devrais donc travailler avec cette requête pour alimenter la seconde liste déroulante.

Sauriez-vous me dire comment je peux déjà lier ces deux listes déroulantes ?

Je vous en remercie d'avance.

beegees

**Bovino** · 19/11/2008, 19h19

En t'inspirant de cet exemple.

**beegees** · 19/11/2008, 19h21

Envoyé par Bovino

En t'inspirant de cet exemple.

Bonjour Bovino,

Merci pour ta réponse.

J'ai travaillé toute la journée sur ce tuto :

http://siddh.developpez.com/articles/ajax/#LIV-A

Merci encore.

beegees

**Bovino** · 19/11/2008, 19h58

Pour pouvoir mieux t'aider, il faut mieux cibler là où tu bloques... apparemment, tu parviens déjà à obtenir une réponse du serveur (?) donc où se situe ton problème ?

**beegees** · 19/11/2008, 20h06

Envoyé par Bovino

Pour pouvoir mieux t'aider, il faut mieux cibler là où tu bloques... apparemment, tu parviens déjà à obtenir une réponse du serveur (?) donc où se situe ton problème ?

Re,

Merci pour ta réponse Bovino.

J'apprends l'AJAX depuis aujourd'hui.

La première liste déroulante contient donc des données grâce à ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php 
                        include('connexion.php');
                        
$res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
//echo($res);
$query = mysql_query($res);
 
 
                        $nbrow = mysql_num_rows($query);
                        echo($nbrow);
        ?>

et grâce à ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form>
				<select name='annee' id='annee' onchange='go()'>
					<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>

Je ne pense donc pas que l'AJAX intervient dans le remplissage de la liste déroulante (???)

Le problème vient donc du code AJAX que voici :

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
<script type='text/javascript'> 
				<script type='text/javascript'>
 
			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;
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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
						document.getElementById('Mnemonic').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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 de l'auteur
				sel = document.getElementById('annee');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("ID="+ID);
			}
		</script>

J'ai compris que ce code permettait d'instancier un objet de type XMLHttpRequest :

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
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;
			}

Ce code est donc totalement compris

Par contre, je comprends que à chaque changement de xhr.onreadystatechange on vérifie si le statut est 4 et qu'il n'y a pas de message d'erreur avec le serveur :

Code :

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

1
2
3
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){

à ce point, je ne sais pas ce que ce code retourne :

leselect = xhr.responseText;

J'ai ajouté ceci :

Code :

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

alert(leselect);

ça ne donne rien.

ici je ne sais pas quel objet je dois mettre :

Code :

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

						document.getElementById('Mnemonic').innerHTML = leselect;

Je ne suis pas sûr de bien utiliser ce code non plus :

Code :

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

1
2
3
4
5
6
7
8
9
// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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 de l'auteur
				sel = document.getElementById('annee');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("ID="+ID);

qui fait appel à cette page de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='select_Nom_mnemonics'>";
	if(isset($_POST["ID"])){
		mysql_connect("localhost","root","mdp");
		mysql_select_db("deliberations");
		$res = mysql_query("SELECT ID,NOM_ANNEE FROM annees 
			WHERE ID=".$_POST["ID"].");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["ID"]."'>".$row["ID"]."</option>";
		}
	}
	echo "</select>";
?>

À propos du code ci-dessus, il me semble que les champs ne sont pas correctes car je travaille avec NOM_ANNEE et non avec ID.

Je dois passer à AJAX car le fait de lier 4 listes déroulantes poses trop de problèmes en JAVASCRIPT.

Merci d'avance pour ton aide très appréciée !

beegees

**Bovino** · 19/11/2008, 20h46

Bon, un début de réponse (on va fonctionner par étapes

) :

Par contre, je comprends que à chaque changement de xhr.onreadystatechange on vérifie si le statut est 4 et qu'il n'y a pas de message d'erreur avec le serveur

Tout simplement parce que lors d'une requête Ajax, il y a plusieurs échanges avec le serveur (le status) en fait, 5 étapes :

0 : non initialisé (donc, on s'en moque), la requête n'a pas été envoyée
1 : ouvert : on s'en moque aussi, mais open a été réussi
2 : envoyé : la requête est partie, le serveur travaille (ça ne nous inréresse pas non plus)
3 : en reception : le serveur envoie les données, mais comme elles ne sont pas toutes reçues, ça ne nous intéresse pas encore !
4 : terminé : tout est reçu, là c'est à nous de continuer, d'où l'attente de ce paramètre !

Et une fois les infos reçues, on vérifie aussi que le résultat est convenable (readyState == 200 : tout s'est bien passé !)

à ce point, je ne sais pas ce que ce code retourne

Il te retourne le résultat du traitement de la page appelée, là il peut y avoir des problèmes, si tu appelles par exemple une page PHP, cette page doit contenir... du contenu ! C'est-à-dire qu'il faut que tu affiches quelquechose typiquement avec echo. Si ton responseText est vide, c'est à priori que ton PHP ne génère rien !

Donc, pour conclure : ta requête Ajax appelle ta page PHP, il faut que tu construises ta page PHP pour qu'elle renvoie quelquechose (y compris après des requêtes MySQL), mais attention, tout ce qui sera généré sera renvoyé sous forme de texte ! Ensuite, lorsque tu reçois la réponse en javascript, à toi de l'utiliser pour faire ce que tu veux...

Bon, j'espère avoir été clair, pour la suite, n'hésites pas à demander !

**beegees** · 20/11/2008, 08h32

Bonjour Bovino,

Tu as été très claire dans ce début de réponse, merci.

Si je veux afficher les valeurs filtrées de la liste select_Nom_mnemonics est ce que ce code est correct ?:

Code :

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

document.getElementById('select_Nom_mnemonics').innerHTML = leselect;

Je viens d'ajouter un ID à mon select :

Code :

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

echo "<select name='select_Nom_mnemonics' id='select_Nom_mnemonics'>";

Le but est donc de filtrer le nom des cours par rapport à l'année choisie (la liste doit donc m'afficher les cours données dans l'année choisie) et par rapport au matricule du Professeur (enregistré dans une variable de session au démarrage de l'application, lors de l'authentification).

Voici la requête :

Code :

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

$res = mysql_query("SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'";

J'ai largement modifié la page "ajaxLivre" je remets donc le code ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
        echo "<select name='select_Nom_mnemonics' id='select_Nom_mnemonics'>";
        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['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'";
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["MNEMONIC"]."'>".$row["MNEMONIC"]."</option>";
                }
        }
        echo "</select>";
?>

Encore merci pour ton aide Bovino.

beegees

**Bovino** · 20/11/2008, 13h37

Pour ajouter des options à ta liste

Code :

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

document.getElementById('select_Nom_mnemonics').innerHTML = leselect;

est correct mais peut poser des problèmes pour la prise en compte des éléments insérés, l'idéal est de revoir la structure des informations reçues et de construire ton select avec les méthodes du DOM (tu peux rechercher cela dans les contributions JavaScript).

**beegees** · 20/11/2008, 13h57

Envoyé par Bovino

Pour ajouter des options à ta liste

Code :

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

document.getElementById('select_Nom_mnemonics').innerHTML = leselect;

est correct mais peut poser des problèmes pour la prise en compte des éléments insérés, l'idéal est de revoir la structure des informations reçues et de construire ton select avec les méthodes du DOM (tu peux rechercher cela dans les contributions JavaScript).

Re,

Merci pour ta réponse.

Je suis vraiment désolé de te demander cela, mais saurais-tu m'en dire plus stp ?

Je dois remettre la première partie de mon travail pour samedi 22/11 et je suis bloqué avec cet AJAX.

J'espère que tu ne prendras pas mal cette réponse, c'est juste que je suis bloqué depuis Dimanche soir.

Voici la dernière version de mon code :

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
70
71
72
73
74
75
76
77
78
<?php 
                        include('connexion.php');
                        
$res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
//echo($res);
$query = mysql_query($res);
 
 
                        $nbrow = mysql_num_rows($query);
                        echo($nbrow);
        ?>
		<script type='text/javascript'> 
				<script type='text/javascript'>
 
			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;
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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;
						alert(leselect);
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('select_Nom_mnemonics').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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 de l'auteur
				sel = document.getElementById('annee');
				NOM_ANNEE= = sel.options[sel.selectedIndex].value;
				xhr.send("NOM_ANNEE="+NOM_ANNEE);
			}
		</script>
 
 
 
		<form>
				<select name='annee' id='annee' onchange='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>
<select id="select_Nom_mnemonics">
<option></option>
</select>
 
 
		</form>

Merci encore.

beegees

**Bovino** · 20/11/2008, 14h14

Tu peux utiliser

Code :

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

1
2
3
new Option(text, value, defaultSelected, selected);
//Exemple :
document.getElementById('select_Nom_mnemonics').options[i] = new Option('Le texte de l\'option','valeur',false,false);

Comme je te disais en structurant les données transmises par ton PHP, par exemple en codant une réponse du style :

Code :

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

'texte1<>valeur1<1>texte2<>valeur2<1>...<1>texten<>valeurn'

où <> et <1> servent de délimiteurs, ensuite, tu splittes cette chaine et tu fais une boucle sur le nombre de résultats :

Code :

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

1
2
3
4
var mes_options = xhr.responseText.split('<1>');
for(i=0;i<mes_options.length;i++){
...
}

et dans cette boucle, tu resplittes selon '<>' et tu as tes valeurs, tu n'as plus qu'à remplir ton select !

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

Bonjour Bovino,

Après quelques heures de recherche hier soir, j'ai enfin réussi à relié deux listes déroulante (même trois).

Le résultat n'est pas 100% ok mais c'est un bon début.

Un tout GRAND et SINCERE merci pour ton aide.

beegees

[AJAX] J'aimerais lier ma première liste déroulante avec la seconde

JavaScript

Discussions similaires

Partager

Partager