[AJAX] Liste déroulante dynamique Ajax.

**MamzellJu** · 28/02/2012, 11h42

Bonjour,

Je suis en stage et j'ai réaliser ce code pour une liste déroulante dynamique grace à : http://siddh.developpez.com/articles/ajax/#LI. Mais ma 2ème liste déroulante ne se génère pas et Opera me donne comme erreur ceci :

Uncaught exception: TypeError: Cannot convert 'sel' to object
Error thrown at line 41, column 4 in go() in http://localhost/Clinique%20de%20Fon...+les+machines:
numCategorie = sel.options[sel.selectedIndex].value;
called from line 1, column 0 in <anonymous function>(event) in http://localhost/Clinique%20de%20Fon...+les+machines:
go()

Pouvez-vous m'aider à la résoudre ?

Voici mon code :
lstMachine.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
 
<!doctype html>
 
<html lang="fr">
	<head>
		<meta charset="ISO 8859-10" />
		<title>Clinique de Fontaine - lstMachine.php</title>
		<link href="cssMaintenance.css" rel="stylesheet" />
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</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 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('machine').innerHTML = leselect;
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxMachine.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('categorie');
				numCategorie = sel.options[sel.selectedIndex].value;
				xhr.send("numCategorie="+numCategorie);
				}
		</script>
	</head>
	<body>
		<div id="contener">
			<header>
				<div id="banniere"> </div>
				<h1>Liste des Machines</h1>
			</header>
			<nav>
				<ul>
					<li><a href="Page1.php">Accueil</a></li>
					<li><a href="lstMachine.php">Consulter les machines</a></li>
					<li><a href="calendrier.php">Consulter le calendrier</a></li>
				</ul>
			</nav>
			<article>
				<form id="formAfficherLst" name="formAfficherLst" action="formAfficher.php" method="GET">
				<fieldset>
					<legend>Liste des Machines</legend>
						Choisir une Catégorie <select name="zldCategorie" id="zldCategorie" onchange='go()'>
								<option value='-1'>AUCUN</option>
								<?php
                                                                        include("connexion.php");
                                                                        // requete allant chercher toute les machines. 
                                                                        $req = "Select numeroC, nomC FROM CATEGORIE ORDER BY nomC;";
                                                                        $rsLstMachine = mysql_query($req, $connexion);
                                                                        // Tant que il y a des machines afficher . 
                                                                        while ($lsLstMachine = mysql_fetch_array($rsLstMachine)) {
                                                                                echo "<option value=".$lsLstMachine['numeroC'].">".$lsLstMachine['nomC']."</option>";
                                                                        }
                                                                ?>
							</select>								
							<br></br>
								Choisir une Machine <select name='zldMachine' id='zldMachine' style='display:inline'>
									<option value='-1'>Choisir une Catégorie</option>
								</select>
 
						<input type="submit" name="btAfficher" value="Afficher" />
				</fieldset>
				<br></br>
				</form>
			</article>
 
			<footer>
				<p>Site developpe en <img src="image/HTML5_Logo_32.png" alt="logo html5"/> <br />
				Derniere mise a jour le <time datetime="2012-02-06" pubdate>06 Fevrier 2012</time>.</p>
			</footer>
		</div>
	</body>
</html>

ajaxMachine.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
        include("connexion.php");
        echo "<select name='zldMachine' id='zldMachine' style='display:inline'>";
        if(isset($_POST["numCategorie"])){
                $res = mysql_query("SELECT codeMachine, designation FROM Machine WHERE numCategorie=".$_POST["numCategorie"]." ORDER BY designation");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value=".$row["codeMachine"].">".$row["designation"]."</option>";
                }
        }
        echo "</select>";
?>

**Bovino** · 28/02/2012, 11h50

Copier / coller du code ne suffit pas, il faut aussi essayer de le comprendre

Code :

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

sel = document.getElementById('categorie');

il est où ton élément dont l'id est 'categorie' ?

**MamzellJu** · 28/02/2012, 14h54

Je le comprend tout à fait le code

Une erreur bête, il suffit de changer l'ID de la liste déroulante "zldCategorie" en "categorie" et "zldMachine" en "machine".

**andry.aime** · 28/02/2012, 15h17

Envoyé par MamzellJu

Une erreur bête, il suffit de changer l'ID de la liste déroulante "zldCategorie" en "categorie" et "zldMachine" en "machine".

C'est un conteneur que tu doits faire innerHTML mais pas un select.

A+.

[AJAX] Liste déroulante dynamique Ajax.

AJAX

Vue hybride

Discussions similaires

Partager

Partager