[AJAX] Liste déroulante

**fourniey** · 04/01/2008, 17h53

Bonjour à tous,

Mon objectif est d'avoir deux listes déroulantes pour afficher un groupe de personnes : une permet de choisir un comité et l'autre de sélectionner l'année désirée sans recharger la page.

Peu importe la sélection du comité, la liste pour l'année est toujours vide.

Merci de votre aide!

Code principal:

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
<html>
	<head>
		<title>Liste déroulante</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('livre');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ca1_an.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
				idauteur = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;
				//alert(idauteur);
				xhr.send("idAuteur="+idauteur);
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend><strong>Critères de sélection</strong></legend>
				<label>Comité</label>
				<select name='auteur' id='auteur' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                require("../config.inc.php");
                                                $res = mysql_query("SELECT * FROM TB_statut ORDER BY description");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["description"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Année</label>
				<div id='livre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir un comité</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Code pour l'année:

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
 
//echo 'entrer';
//echo $_REQUEST["idAuteur"];
 
echo $_POST["idAuteur"];
 
        echo "<select name='livre'>";
        if(isset($_REQUEST["idAuteur"])){
                echo 'Passer';
                require("../config.inc.php");
                $res = mysql_query("SELECT id,an FROM ATS_statut WHERE type=".$_REQUEST["idAuteur"]." ORDER BY an");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["id"]."'>".$row["an"]."</option>";
                }
        }
        else
                echo "<option value='-1'>Choisir un comité</option>";
        echo "</select>";
?>

**psylox** · 07/01/2008, 15h01

Envoyé par fourniey

function change()
{
idauteur = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;
}

<select name='auteur' id='auteur' onchange='change()'>

remplace par :

Code :

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

1
2
3
4
5
6
7
 
function change(idauteur)
{
}
 
 
<select name='auteur' id='auteur' onchange='change(this.selectedIndex.value)'>

Code :

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

1
2
3
4
5
if(isset($_POST['idAuteur'])){
		echo 'Passer';
		require("../config.inc.php");
		$res = mysql_query("SELECT id,an FROM ATS_statut WHERE type=".$_POST['idAuteur']." ORDER BY an");

**fourniey** · 07/01/2008, 18h56

Merci pour ta réponse. J'obtiens cette erreur: undefined et la liste est vide.

J'espère avoir apporté les corrections correctement. Voic le 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
79
80
81
82
<html>
	<head>
		<title>Liste déroulante</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(idauteur)
			{
				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('livre');
						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
				//idauteur = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;
				//alert(idauteur);
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend><strong>Liste disponible</strong></legend>
				<label>Comité</label>
					<select name='auteur' id='auteur' onchange='change(this.selectedIndex.value)'>
					<option value='-1'>Aucun</option>
					<?php
                                                require("../config.inc.php");
                                                $res = mysql_query("SELECT * FROM TB_statut where web_site='O' ORDER BY description");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["ca"]."'>".$row["description"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Année</label>
				<div id='livre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir une année</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

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
 
<?php
 
//echo $_REQUEST["idAuteur"];
 
        echo "<select name='livre'>";
        
        if(isset($_POST['idAuteur'])){
                echo 'Passer';
                require("../config.inc.php");
                $res = mysql_query("SELECT id,an FROM ATS_statut WHERE type=".$_POST['idAuteur']." ORDER BY an");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
                }
        }
        else
                echo "<option value='-1'>Choisir un auteur</option>";
        echo "</select>";
?>

**psylox** · 11/01/2008, 18h22

Qu'est-ce qui est undefined? l'idAuteur ou bien la réponse ?
as tu essayé un alert(xhr.responseText); ?

**fourniey** · 11/01/2008, 20h24

On dirait que le post ne fonctionne pas.

La variable idauteur est vide quand je passe dans le fichier t1a.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
<html>
	<head>
		<title>Liste déroulante</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(idauteur)
			{
				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('livre');
						di.innerHTML = xhr.responseText;
					}
				}
 
				xhr.open("POST","t1a.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments (id de l'auteur)
				//idauteur = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;
				//alert(idauteur);
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend><strong>Liste disponible</strong></legend>
				<label>Comité</label>
					<select name='auteur' id='auteur' onchange='change(this.selectedIndex.value)'>
					<option value='-1'>Aucun</option>
					<?php
                                                require("../config.inc.php");
                                                $res = mysql_query("SELECT * FROM TB_statut where web_site='O' ORDER BY description");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["ca"]."'>".$row["description"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Année</label>
				<div id='livre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir une année</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

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
<?php
 
//echo $_REQUEST["idAuteur"];
//alert(xhr.responseText);
 
echo "<select name='livre'>";
        if(isset($_POST['idAuteur'])){
                echo 'Passer';
                require("../config.inc.php");
                $res = mysql_query("SELECT id,an FROM ATS_statut WHERE type=".$_POST['idAuteur']." ORDER BY an");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
                }
        }
        else
                echo "<option value='-1'>Choisir un auteur</option>";
        echo "</select>";
?>

**psylox** · 12/01/2008, 20h58

essaye de faire un alert(idAuteur) dans ta fonction ajax , j'ai peut-etre oublié kkchoz dans le passage de parametres a cette fonction.

Edit: En effet, si tu cherchais un peu tu aurais trouvé "this.selectedIndex has no properties" donc tu enlèves le .value que le suit.
Un conseil si ce n'est pas déja le cas, je te recommande vivement l'utilisation de plugin firefox tel que webdevelopper ou firebug.

**fourniey** · 13/01/2008, 04h14

Je vais tester ce que tu mentionnes... Merci!

Pour ce qui est de Firefox, j'ai la version 3.0 béta alors les plugin ne fonctionne pas.

[AJAX] Liste déroulante

JavaScript

Discussions similaires

Partager

Partager