[AJAX] Seconde liste déroulante ne se construit pas

**jfox** · 31/08/2009, 12h50

Bonjour,

comme le suggère le titre de ce post, encore un problème de liste liée...
J'ai lu et testé tous les tutoriels disponibles (merci à tous les contributeurs) et j'ai déjà fait tourner ce type de fonctionnalité (3 listes liées) à une autre occasion sans aucun problème.
Je vous remercie de bien vouloir jeter un oeil sur le code suivant en sachant que c'est la liste déroulante "commune" qui ne se construit pas (le 3e select).
Le fichier 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
80
81
82
83
84
85
86
87
88
89
90
91
 
<html>
	<head>
		<script type="text/javascript" src=".././Modeles/js/getXhr.js"></script>
		<script type="text/javascript">
			function niveau(){
				var xhr = getXhr();
				xhr.onreadystatechange = function()
					{
						if(xhr.readyState == 4 && xhr.status == 200)
						{
							var rst = xhr.responseText;
							document.getElementById('niv').value = rst;
						}
					}
				xhr.open("POST", "ajaxNiveau.php", true);
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				sel = document.getElementById('archer');
				idArcher = sel.options[sel.selectedIndex].value;
				xhr.send("idArcher="+idArcher);
			}
 
			function departement(){
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var rst2 = xhr.responseXML;
						var items = getElementsByTagName('element');
 
						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('commune').options[i]=myOption;
						}
					document.getElementById('commune').selectedIndex = 0;
					}
				}
				xhr.open("POST", "ajaxCommune.php", true);
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				sel2=document.getElementById('dept');
				idDept=sel2.options[sel2.selectedIndex].value;
				xhr.send("idDept="+idDept);
			}
		</script>
	</head>
	<body>
<?php
include '.././Controleur/verif_session.php';
include '.././Controleur/base.cnx.php';
include '.././Vues/menu.php';
include '.././Modeles/rqArcher.php';
include '.././Modeles/rqDept.php';
?>
 
<form id="fpassindiv" name="fpassindiv" method="post" action=".././Modeles/fp_prochain.php">
	<fieldset>
	<legend>Saisie individuelle d'un passage de niveau</legend>
		<select name="archer" id="archer" onchange="niveau()">
			<option value="-1">---> A R C H E R <---</option>
				<?php
                                while ($dataArcher=mysqli_fetch_assoc($rqArcher)){
                                        extract($dataArcher);
                                        echo "<option value='".$arnum."'>".$arnom." ".$arprenom."</option>";
                                }
                                ?>
		</select>
 
		<input type="text" name="niv" id="niv">
 
		<select name="dept" id="dept" onchange="departement()">
			<option value="078">---> 078 <---</option>
				<?php
                                while ($dataDept = mysqli_fetch_assoc($rqDept)){
                                        extract($dataDept);
                                        echo "<option value='".$ncodept."'>".$ncodept."</option>";
                                }
                                ?>
		</select>
 
		<select name="commune" id="commune">
			<option value="31941">---> RAMBOUILLET <---</option>
		</select>
 
		Date (jj/mm/aaaa) <input type="text" name="date" id="date" size="10">
		Score <input type="text" name="score" id="score" size="10">
		<br><br>
		<input type="submit" name="btnMAJ" id="btnMAJ" value="Enregistrer">
	</fieldset>
</form>
 
	</body>
</html>

Le fichier php utilisé dans la fonction niveau():

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
        if(isset($_POST['idArcher'])){
                include '.././Controleur/verif_session.php';
                include '.././Controleur/base.cnx.php';
                $sqlNiveau="select nblibelle, nclibelle from badge, nbadge, ncouleur where badge.batype=nbadge.nbnum 
                and badge.bacouleur=ncouleur.ncnum and badge.baarcher='".$_POST['idArcher']."' and badge.badate='0000-00-00'";
                $rqNiveau=mysqli_query($cnx, $sqlNiveau) or die("Exécution de la requête rqNiveau impossible");
                $dataNiveau=mysqli_fetch_assoc($rqNiveau);
                extract($dataNiveau);
                echo utf8_encode($nblibelle." ".$nclibelle);
        }
?>

Le fichier php utilisé dans la fonction departement():

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
header("Content-Type: text/xml; charset=utf-8");
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<elements>";
if(isset($_POST['idDept'])){
        include '../Tilalac/Controleur/base.cnx.php';
        $sqlCommune="select * from ncommune where ncodept='".$_POST['idDept']."' order by ncolibelle";
        $rqCommune=mysqli_query($cnx, $sqlCommune) or die("Exécution de la requête rqCommune impossible");
        while ($dataCommune=mysqli_fetch_assoc($rqCommune)) {
                extract($dataCommune);
                echo "<element>";
                echo "<option>".$ncolibelle."</option>";
                echo "<valeur>".$nconum."</valeur>";
                echo "</element>";
        }       
}
echo "</elements>";
?>

**Bovino** · 31/08/2009, 13h12

Salut,

Code :

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

document.getElementById('niv').value = rst;

Tu es certain que c'est bien le value que tu veux modifier ?

**andry.aime** · 31/08/2009, 13h22

Salut,

var rst2 = xhr.responseXML;
var items = getElementsByTagName('element');

Code :

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

1
2
3
4
5
var rst2 = xhr.responseXML;
var items = rst2.getElementsByTagName('element');// L'erreur
document.getElementById('commune').options.length=0;//Vider la liste avant d'ajouter
for(var i=0;i<items.length;i++){
....

**jfox** · 31/08/2009, 13h36

Merci à tous les deux.

Bovino: oui, c'est bien value que je veux changer: il s'agit de donner une information de vérification à la personne qui saisit (champ non posté mais peut-être peut-on faire autrement?).

andry.aime: si je comprends bien, l'erreur est de n'avoir pas vidé le select. Je vais tester ce soir.

**Bovino** · 31/08/2009, 13h43

Non, pas seulement, l'erreur est surtout de ne pas avoir précisé sur quel objet tu appliques getElementsByTagName :

Code :

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

var items = getElementsByTagName('element');

**jfox** · 31/08/2009, 13h53

<element> est une balise xml du fichier ajaxCommune.php

**andry.aime** · 31/08/2009, 13h56

As-tu compris la réponse de Bovino?
Regarde le code que je t'ai donnée.

**jfox** · 31/08/2009, 15h08

Je croyais avoir compris mais apparemment ce n'est pas le cas?
Ce que j'ai compris:

- je poste le n° du département au fichier ajaxCommune.php;
- le fichier exécute une requête sql et construit une réponse sous forme xml:

<option>libellé commune</option>
<valeur>numéro commune</valeur>

</element>

</elements>

- la fonction departement() affecte à rst2 un objet responseXML et à items le contenu des balises <element>...</element> du fichier ajaxCommune.php.

Peut-être un effet du hasard mais j'ai construit des fichiers tests avec les mêmes balises xml, l'id du select principal était "theme" et le second "menu" et cela fonctionne très bien. La différence pour moi réside dans le nettoyage du 2nd select que j'ai fait dans un cas et pas dans l'autre.

Nonobstant, si je n'ai rien compris, il vaut mieux me le dire afin que je retourne aux tutoriels et autres posts

**andry.aime** · 31/08/2009, 15h15

Envoyé par Bovino

Non, pas seulement, l'erreur est surtout de ne pas avoir précisé sur quel objet tu appliques getElementsByTagName :

Code :

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

1
2
var rst2 = xhr.responseXML;
var items = rst2.getElementsByTagName('element');

**jfox** · 31/08/2009, 15h49

mea maxima culpa!!!

Je corrige, j'ajoute et je vous dis quoi.
Merci.

**jfox** · 01/09/2009, 07h47

Bonjour,

c'était bien cela!
Merci à vous deux.

[AJAX] Seconde liste déroulante ne se construit pas

AJAX

Discussions similaires

Partager

Partager