[AJAX] la liste déroulante ne montre aucun résultat

Version imprimable

18/11/2008, 16h24
beegees

[AJAX] la liste déroulante ne montre aucun résultat

Bonjour,

J'essaie d'apprendre l'AJAX car je dois lier trois listes déroulantes en essayant de ne pas avoir de rechargement de page.

Je me suis donc basé sur ce cours :

http://siddh.developpez.com/articles/ajax/

J'ai copié/collé le code.

J'ai créé la table MYSQL avec le code fourni, j'ai appelé ma bd "test".

Quand j'ouvre la première liste déroulante (Auteurs), je n'obtiens rien.

D'où pensez-vous que le problème peut provenir ?

Merci d'avance.

beegees
18/11/2008, 16h37
E.Bzz

Bonjour,

Citation:

Envoyé par beegees

D'où pensez-vous que le problème peut provenir ?

De ton code :mouarf:

Montre-le ...

A+

Citation:

Envoyé par E.Bzz

Bonjour,De ton code :mouarf:

Montre-le ...

A+

Bonjour,

Merci pour ta réponse rapide :

auteurs.php :

Code:

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
<html>
	<head>
		<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('livre').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('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","mdp");
						mysql_select_db("test");
						$res = mysql_query("SELECT * FROM auteur ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

et ajaxLivre.php

Code:

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

Qu'en penses-tu ?

Merci encore.

beegees

18/11/2008, 16h56
E.Bzz
Le name de ton 2° select et l'id du div qui le contient peuvent poser problème à IE (qui confond allègrement name et id).
Essaye avec
Code:

1 2 3 <select name='les_livres'> <option value='-1'>Choisir un auteur</option> </select>
A répercuter dans ton PHP qui remplace ce select ...

A+
18/11/2008, 16h59
E.Bzz

Au fait

Citation:

Envoyé par beegees

Quand j'ouvre la première liste déroulante (Auteurs), je n'obtiens rien.

tu dois avoir au moins une erreur, soit Javascript (en activant la notification des erreurs de scripts dans ton nav ou en utilisant Firebug ou équivalent), soit PHP (en analysant ton responseText qui doit la récupérer) ...

Ou alors, c'est que les id stockés dans ta table ne correspondent pas à celui envoyé comme paramètre par Ajax ...

A+
18/11/2008, 17h03
beegees
Citation:
Envoyé par E.Bzz

Le name de ton 2° select et l'id du div qui le contient peuvent poser problème à IE (qui confond allègrement name et id).
Essaye avec

Code:

1 2 3 <select name='les_livres'> <option value='-1'>Choisir un auteur</option> </select>

A répercuter dans ton PHP qui remplace ce select ...

A+
Citation:

Envoyé par E.Bzz

Au fait
tu dois avoir au moins une erreur, soit Javascript (en activant la notification des erreurs de scripts dans ton nav ou en utilisant Firebug ou équivalent), soit PHP (en analysant ton responseText qui doit la récupérer) ...

Ou alors, c'est que les id stockés dans ta table ne correspondent pas à celui envoyé comme paramètre par Ajax ...

A+

Salut,

Merci pour ta réponse.

En fait j'utilise toujours firefox.

Je ne comprends pas car c'est un copié collé du code dont j'ai communiqué l'URL, cours de developpez.com.

Je vais essayer de voir avec firebug (que je ne sais pas utiliser) et je te dis quoi.

Edit : y'a-t'il une manipulation à faire avec le firebug ?

Merci encore

beegees
18/11/2008, 17h24
E.Bzz

Dans Firefox, tu as déjà la console d'erreur (menu Outils) ...

A+