Tutoriel de siddh ne fonctionne pas!

**jfox** · 17/03/2008, 14h08

Bonjour,

comme l'intitulé l'indique, j'ai un problème avec le tutoriel de siddh sur les listes déroulantes liées.
Pour faire simple, avant de l'essayer sur ma propre base, je l'ai recopié in extenso pour le tester. Làs, quand je clique sur la 1ère liste déroulante (celle des auteurs), aucune valeur ne s'affiche.
Merci de vos lumières pour le grand débutant js-ajax que je suis.

**le_chomeur** · 17/03/2008, 14h17

as tu une erreur retournée ?

**jfox** · 17/03/2008, 14h29

Non, rien! La liste déroulante affiche "Aucun" et rien d'autre.

**SpaceFrog** · 17/03/2008, 15h07

Attends ... parceque là vu comme ça il faut soit que tu te décales un poil sur la droite, ou alors que je pivote ma boule de crystal d'un angle de 3,73 degrés dasn le sens contraire des aiguilles d'une montre parceque je n'arrives pas bien à voir ton code ...

**le_chomeur** · 17/03/2008, 15h14

Un minimum de recherche spaffy ! voyons !!

lol je pense qu'il doit parler de celle ci

: http://siddh.developpez.com/articles/ajax/#LIV-A

**SpaceFrog** · 17/03/2008, 15h27

Je sais Toph ce code là je le connais par coeur ...

ce que je cherchais à voir c'est ce qu'il retournait dasn son responseText ...
et là c'est pas dans le code de siddh ...

**jfox** · 17/03/2008, 15h37

euh... est-ce que par hasard tu ferais allusion à la ligne que j'ai mise en gras?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
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;
					}
				}

C'est la seule ligne que j'ai trouvée et qui correspondrait à ta question.

**SpaceFrog** · 17/03/2008, 15h39

non !!!
la page php qui construit le responseText ...

**jfox** · 17/03/2008, 15h53

Bon, je vais faire plus simple.
Voici le contenu du fichier 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
<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","");
						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 voici le contenu du fichier 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
<?php
	echo "<select name='livre'>";
	if(isset($_POST["idAuteur"])){
		mysql_connect("localhost","root","");
		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>";
?>

Autre précision: mon navigateur est FF (mais je ne pense pas que cela ait un effet quelconque ici).

**SpaceFrog** · 17/03/2008, 15h59

attention entre id et name

Code :

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

1
2
3
 
<div id='livres'>
 <select name='livre' >

Code :

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

document.getElementById('livres').innerHTML = leselect;

**jfox** · 17/03/2008, 16h11

J'ai apporté les modifications mais toujours rien dans la liste des auteurs (la table des auteurs existe dans la base et contient des id et des noms).

**SpaceFrog** · 17/03/2008, 16h21

à la place de

Code :

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

document.getElementById('livre').innerHTML = leselect;

mets :

Code :

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

1
2
//document.getElementById('livre').innerHTML = leselect;
alert(leselect)

et dis moi ce qu'il fait ...

**jfox** · 17/03/2008, 16h25

Rien! Désolé!
Les deux listes s'affichent avec juste Aucun dans Auteur et Choisir un auteur dans Livres

**Matthieu2000** · 17/03/2008, 16h38

Question bête : As tu des données dans ta base?

**SpaceFrog** · 17/03/2008, 17h03

rien ???
même pas d'alert

**Matthieu2000** · 17/03/2008, 17h08

Code :

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

1
2
3
4
5
6
7
8
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;
					}
				}else{alert(xhr.readyState +" / "+xhr.status ); }

juste au cas où il y a l'erreur 500!

**SpaceFrog** · 17/03/2008, 17h43

tu testes en local ou distant ? ton serveur accepte le php ?

**jfox** · 17/03/2008, 21h47

bonsoir,

désolé pour l'interruption.
Pour répondre aux deux derniers posts: oui j'ai bien des données et non il ne se passe rien.
Je me trompe sûrement mais c'est comme si l'une des conditions n'étaient pas remplies

Code :

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

xhr.readyState == 4 && xhr.status == 200

Je peux les vérifier avec alert()?

**SpaceFrog** · 18/03/2008, 08h34

le code que je t'ai donné devrait declencher un alert ...

**jfox** · 18/03/2008, 10h26

Bonjour,
Je teste en local et je suis sous wamp.
L'événement ne se déclenche que sur le onchange. Or, si la liste ne se constitue pas je ne peux pas changer de valeur donc pas de script.
Je ne pense pas que cela soit lié au javascript mais plus au sql et html car j'ai testé xhr.readyState et xhr.status et celles-ci valent respectivement 4 et 200. Donc c'est ok.
Je vais essayer la constitution de la 1ère liste séparément et je vous tiens au courant.
Merci pour votre aide.

Tutoriel de siddh ne fonctionne pas!

JavaScript

Discussions similaires

Partager

Partager