[AJAX] Liste liées Ajax

Invité · 13/07/2009, 09h30

Bonjour,

Je veux mettre en place une liste liée étant alimenté par une table d'une base de données MySQL.

Ma talbe en question est la table "stagiaires", elle comporte plusieurs champs. Les deux champs qui me sont nécessaire pour ma liste liée est Nom et Prénom.

Pour mettre en place cette liste liée, j'ai essayer de modifier le code source fournit dans le tuto dispo >ICI<

Voici mon code source :

auteur.php

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
79
80
81
82
83
84
85
86
87
88
89
<html>
	<head>
		<title>My webpage is rich</title>
		<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 change()
			{	
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					alert(xhr.readyState);
					// 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)
					{
						di = document.getElementById('Stagiaires');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// 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
				NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
				alert(NomStg);
				xhr.send("Nom="+NomStg);			
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Noms</label>
				<select name='nom' id='nom' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                mysql_connect("localhost","root","mysql");
                                                mysql_select_db("bdd");
                                                $res = mysql_query("SELECT Distinct Nom from Stagiaires ORDER BY Nom");
                                                while($row = mysql_fetch_assoc($res))
                                                {
                                                        echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Prenoms</label>
				<div id='prenom' style='display:inline'>
				<select name='prenom'>
					<option value='-1'>Choisir un nom</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxLivre.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
        echo "<select name='prenom'>";
        if(isset($_POST["Nom"])){
                mysql_connect("localhost","root","mysql");
                mysql_select_db("bdd");
                $res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom=".$_POST["Nom"]." ORDER BY Prenom");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Prenom"]."'>".$row["Prenom"]."</option>";
                }
        }
        echo "</select>";
?>

Le probleme que je rencontre c'est que dans ajaxLivre.php je n'arrive pas à récupérer le Nom. Pourtant dans auteur.php dans le code javscript a la fin de la fonction change() qui est appelé des que l'élément de la liste change, je récupère bien le bon Nom selectionner dans la liste (je vérifie cela grace à alert(NomStg) ).

Merci

[Edit] Ps: A noter que Prenom et Nom sont des varchar dans la table alors que dans l'exemple ce sont des int qui sont utiliser (id) je ne pense pas que sa change grand chose dans le code Html/php mais peut etre dans le js avec la ligne "document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
"

**emmanuel.remy** · 13/07/2009, 09h47

Salut,

3 observations:

Est ce normale que tu ne pointes pas vers la même base pour les 2 codes ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<select name='nom' id='nom' onchange='change()'>
	<option value='-1'>Aucun</option>
	<?php
		mysql_connect("localhost","root","mysql");
		mysql_select_db("bdd");

et ensuite:

	if(isset($_POST["Nom"])){
		mysql_connect("localhost","root","mysql");
		mysql_select_db("test");

ta seconde requête est erronée, la valeur de Nom devant être mise entre quotes:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
$res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom");
```

Tu fais référence à Prenom, mais tu injectes Nom... cela ne peut pas le faire: il y a un souci (ou plutôt certainement une étourderie):

Code :

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

1
2
3
4
5
6
$res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom=".$_POST["Nom"]." ORDER BY Prenom");
while($row = mysql_fetch_assoc($res))
{
	echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>";
}

ERE

Invité · 13/07/2009, 09h53

Merci de ta réponse, le pointage sur les deux bdd différentes est une erreure de copier/coller dans le post

Sinon pour tes deux dernières observations cela ne change rien, meme si pour la derniere j'ai fait une grosse faute d'étourderie !

Mais merci quand même de t'être penché dessus

**emmanuel.remy** · 13/07/2009, 10h06

Re,

Ton code ajaxLivre.php est bien exécuté ?

ERE

Invité · 13/07/2009, 10h20

Justement c'est ce que je me posais comme question car dans ajaxLivre.php lors de la connexion à la base j'ai modifier le code : mysql_connect("localhost","root","root")or die("Conection impossible");

en mettant un mauvais mot de passe et je n'ai pas de message d'erreur qui apparait et je ne vois pas pourquoi ajaxLivre.php n'est pas exécuté !

Peut etre que je n'envoi pas les infos car il y a une erreure dans la préparation de la requete avec document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
?? !

**emmanuel.remy** · 13/07/2009, 10h34

Re,

Je n'avais pas fait attention mais:

Code :

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

1
2
3
4
5
					if(xhr.readyState == 4 && xhr.status == 200)
{
	di = document.getElementById('Stagiaires');
	di.innerHTML = xhr.responseText;
}

Il est ou l'id Stagaires dans ta page ?

ERE

Invité · 13/07/2009, 10h46

Merci de m'avoir ouvert les yeux, sa marche nikel

J'étais vraiment étourdi/endormi ce matin

En tout cas merci de m'avoir aider !

Invité · 13/07/2009, 11h57

En faite maintenant j'aimerai afficher une information en plus dans une 3ème liste déroulante en fonction des deux premières.

Pour cela j'ai modifier le fichier auteur.php en rajoutant une fonction change2() et l'appel de cette fonction dans les attributs de la 2e liste déroulante

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
	<head>
		<title>My webpage is rich</title>
		<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 change()
			{	
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					//alert(xhr.readyState);
					// 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)
					{
						di = document.getElementById('prenom');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// 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
				NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
				//PrenomStg = document.getElementById('prenom').options[document.getElementById('prenom').selectedIndex].value;
				//alert(NomStg);
				xhr.send("Nom="+NomStg);
				//xhr.send("Prenom="+PrenomStg);				
			}
			function change2()
			{	
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					//alert(xhr.readyState);
					// 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)
					{
						di = document.getElementById('id_def');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxId_Def",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
				//NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
				PrenomStg = document.getElementById('prenom').options[document.getElementById('prenom').selectedIndex].value;
				//alert(NomStg);
				//xhr.send("Nom="+NomStg);
				xhr.send("Prenom="+PrenomStg);				
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 600px">
				<legend>Liste liées</legend>
				<label>Noms</label>
				<select name='nom' id='nom' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                mysql_connect("localhost","root","mysql");
                                                mysql_select_db("cmfp_base_commune");
                                                $res = mysql_query("SELECT Distinct Nom from Stagiaires ORDER BY Nom");
                                                while($row = mysql_fetch_assoc($res))
                                                {
                                                        echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Prenoms</label>
				<div id='prenom' style='display:inline'>
				<select name='prenom' id='prenom' onchange='change2()'>
					<option value='-1'>Choisir un nom</option>
				</select>
				</div>
				<label>Id_Def</label>
				<div id='id_def' style='display:inline'>
				<select name='id_def'>
					<option value='-1'>Choisir un nom et un prenom</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ensuite dans ajaxLire.php j'ai modifié les attributs de la liste déroulante en appelant la fonction change2 lors du onchange.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
        echo "<select name='prenom' onchange='change2()>";
        if(isset($_POST["Nom"]))
        {
                mysql_connect("localhost","root","mysql")or die("Conection impossible");
                mysql_select_db("cmfp_base_commune");
                $res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Prenom"]."'>".$row["Prenom"]."</option>";
                }
        }
        echo "</select>";
?>

et j'ai créer un 3ème fichier appeler ajaxId_Def

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
        echo "<select name='id_def'>";
        if((isset($_POST["Prenom"]))&&(isset($_POST["Nom"])))
        {
                mysql_connect("localhost","root","mysql")or die("Conection impossible");
                mysql_select_db("cmfp_base_commune");
                $res = mysql_query("SELECT Id_Def from Stagiaires WHERE Nom = '".$_POST["Nom"]."' && Prenom = '".$_POST["Prenom"]."' ORDER BY Id_Def");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Id_Def"]."'>".$row["Id_Def"]."</option>";
                }
        }
        echo "</select>";
?>

Cependant ce code ne marche pas, de plus je ne vois pas comment dans le 3e fichier on pourrait récupérer le "Nom" de la manière que j'ai faite !

**emmanuel.remy** · 13/07/2009, 13h15

Re,

Code :

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

1
2
3
4
NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
PrenomStg = document.getElementById('prenom').options[document.getElementById('prenom').selectedIndex].value;
//alert(NomStg);
xhr.send("Prenom="+PrenomStg + "&Nom="+NomStg);

Puis à noter:

Code :

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

1
2
<?php
	echo "<select name='prenom' onchange='change2()'>";

et enfin:

Code :

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

$res = mysql_query("SELECT Id_Def from Stagiaires WHERE Nom = '".$_POST["Nom"]."' AND Prenom = '".$_POST["Prenom"]."' ORDER BY Id_Def");

ERE

Invité · 13/07/2009, 13h32

Encore merci pour ton aide, mais sa ne marche toujours pas ! J'ai effectué quelques tests, et j'ai l'impression qu'il ne rentre pas dans ajaxId_Def.php

J'ai donc essayé de modifier l'endroit de l'appel de change2() mais rien n'y fait

**emmanuel.remy** · 13/07/2009, 13h36

Envoyé par jeanjean8501

Encore merci pour ton aide, mais sa ne marche toujours pas ! J'ai effectué quelques tests, et j'ai l'impression qu'il ne rentre pas dans ajaxId_Def.php

J'ai donc essayé de modifier l'appel de change2() mais rien n'y fait

Attention car tu as deux fois l'id prenom

Code :

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

1
2
3
4
5
	<div id='prenom' style='display:inline'>
			<select name='prenom' id='prenom' onchange='change2()'>
				<option value='-1'>Choisir un nom</option>
			</select>
		</div>

ERE
ERE

Invité · 13/07/2009, 13h44

Effectivement j'avais rajouté un id dans les select name lors de mes phases de test, apres suppression de ces dernières, sa ne fonctionne toujours pas

Jvai continuer de reflechir/fouiner

**emmanuel.remy** · 13/07/2009, 13h50

Envoyé par jeanjean8501

Effectivement j'avais rajouté un id dans les select name lors de mes phases de test, apres suppression de ces dernières, sa ne fonctionne toujours pas

Jvai continuer de reflechir/fouiner

Attention car tu dois avoir un id prenom dans le select du même nom si tu veux le récupérer comme tu fais:

Code :

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

PrenomStg = document.getElementById('prenom').options[document.getElementById('prenom').selectedIndex].value;

Sinon il n'y a aucune difficulté, c'est exactement le même code. Note juste que normalement il faut éviter de remplacer via un innerHTML une balise complète select ou autre. Cela peut poser souci lors du post final. L'idéal étant de renvoyer via ajax les données vers le poste client et ensuite de remplir ton select en javascript depuis le client.

ERE

Invité · 13/07/2009, 13h59

Je ne comprend pas pourquoi dans le tuto dont j'ai donné le lien en 1er post n'attribue pas d'id au <select> et sa marche quand meme !

J'ai modifier le nom de l'id de mes div tout en mettant l'id au select mais cela ne marche pas !

Ya un truc que je doit pas piger car en principe comme tu le dit le procéder et le même, il ne faut pas réinventer la roue a chaque fois !

Et merci pour l'info sur les innerHTML (avant ce matin je ne connaisai pas sa ^^ )

**emmanuel.remy** · 13/07/2009, 19h31

Re,

Renvoie stp le code actuel. Parce que avec les diverses modifications d'id je ne sais pas la forme qu'il a...

ERE

Invité · 15/07/2009, 08h16

Bonjour,

auteur.php

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
	<head>
		<title>My webpage is rich</title>
		<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 change()
			{	
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					//alert(xhr.readyState);
					// 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)
					{
						di = document.getElementById('prenom');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// 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
				NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
				//PrenomStg = document.getElementById('prenom').options[document.getElementById('prenom').selectedIndex].value;
				//alert(NomStg);
				xhr.send("Nom="+NomStg);
				//xhr.send("Prenom="+PrenomStg);				
			}
			function change2()
			{	
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					//alert(xhr.readyState);
					// 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)
					{
						di = document.getElementById('id_def');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxId_Def.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
				NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
				PrenomStg = document.getElementById('prenom').options[document.getElementById('prenom').selectedIndex].value;
				//alert(NomStg);
				xhr.send("Prenom="+PrenomStg + "&Nom="+NomStg);				
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 600px">
				<legend>Liste liées</legend>
				<label>Noms</label>
				<select name='nom' id='nom' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                mysql_connect("localhost","root","mysql");
                                                mysql_select_db("cmfp_base_commune");
                                                $res = mysql_query("SELECT Distinct Nom from Stagiaires ORDER BY Nom");
                                                while($row = mysql_fetch_assoc($res))
                                                {
                                                        echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Prenoms</label>
				<div id='prenom' style='display:inline'>
				<select name='prenom'>
					<option value='-1'>Choisir un nom</option>
				</select>
				</div>
				<label>Id_Def</label>
				<div id='id_def' style='display:inline'>
				<select name='id_def' >
					<option value='-1'>Choisir un nom et un prenom</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Remarque : Si je met pas id=prenom dans les propriété de la div ça ne fonctionne pas.

ajaxLivre.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
        echo "<select name='prenom' onchange='change2()' >";
        if(isset($_POST["Nom"]))
        {
                mysql_connect("localhost","root","mysql")or die("Conection impossible");
                mysql_select_db("cmfp_base_commune");
                $res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Prenom"]."'>".$row["Prenom"]."</option>";
                }
        }
        echo "</select>";
?>

ajaxId_Def.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
        echo "<select name='id_def'>";
        if((isset($_POST["Prenom"]))&&(isset($_POST["Nom"])))
        {
                mysql_connect("localhost","root","mysql")or die("Conection impossible");
                mysql_select_db("cmfp_base_commune");
                $res = mysql_query("SELECT Id_Def from Stagiaires WHERE Nom = '".$_POST["Nom"]."' AND Prenom = '".$_POST["Prenom"]."' ORDER BY Id_Def");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Id_Def"]."'>".$row["Id_Def"]."</option>";
                }
        }
        echo "</select>";
?>

**andry.aime** · 15/07/2009, 09h01

Salut,

Remarque : Si je met pas id=prenom dans les propriété de la div ça ne fonctionne pas.

C'est parceque tu dois appeller le div à partir de son id :

di = document.getElementById('prenom');

Pourquoi ne pas utiliser un retour XML pour recharger les select avec DOM.

Invité · 15/07/2009, 09h21

Je trouve sa un peu lourd de créer un fichier XML pour le charger apres dans les listes déroulantes.

Autant directement alimenter les listes grâce à une requête, non ?

**andry.aime** · 15/07/2009, 10h04

Le XML est généré avec ton php de même façon que tu génères le select à partir une requête. Ensuite tu faits une boucle pour parcourir le XML et ajouter les options.

Code PHP :

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
<?php
header("Content-type:text/xml");
echo'<?xml version="1.0" encoding="ISO-8859-1"?>';
        echo "<elements>";
	if(isset($_POST["Nom"]))
	{
		mysql_connect("localhost","root","mysql")or die("Conection impossible");
		mysql_select_db("cmfp_base_commune");
		$res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom");
		while($row = mysql_fetch_assoc($res))
		{
			echo'<element>';
                        echo "<option>".$row["Prenom"]."</option>";
                        echo'<valeur>'.$row["Prenom"].'</valeur>';
                        echo'</element>';
		}
	}
	echo "</elements>";
?>

Code :

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

1
2
3
4
5
6
7
8
var rst = xhr.responseXML;
var items=rst.getElementsByTagName('element');
document.getElementById('id_select').options.length=0;
for(var i=0;i<items.length;i++)
  {
    var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
    document.getElementById('id_select').options[i]=myOption;
  }