Tutoriel de siddh ne fonctionne pas!

Version imprimable

17/03/2008, 14h08
jfox

Tutoriel de siddh ne fonctionne pas!

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.
17/03/2008, 14h17
le_chomeur

as tu une erreur retournée ?
17/03/2008, 14h29
jfox

Non, rien! La liste déroulante affiche "Aucun" et rien d'autre.
17/03/2008, 15h07
SpaceFrog

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 ...
17/03/2008, 15h14
le_chomeur

Un minimum de recherche spaffy ! voyons !! :mouarf::mouarf::mouarf:

lol je pense qu'il doit parler de celle ci ;) : http://siddh.developpez.com/articles/ajax/#LIV-A
17/03/2008, 15h27
SpaceFrog

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 ...

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

Code:

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.

17/03/2008, 15h39
SpaceFrog

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

Bon, je vais faire plus simple.
Voici le contenu du fichier auteur.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","");
						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:

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).

17/03/2008, 15h59
SpaceFrog
attention entre id et name
Code:

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

document.getElementById('livres').innerHTML = leselect;
17/03/2008, 16h11
jfox

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).
17/03/2008, 16h21
SpaceFrog
à la place de

Code:

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

mets :
Code:

1 2 //document.getElementById('livre').innerHTML = leselect; alert(leselect)
et dis moi ce qu'il fait ...
17/03/2008, 16h25
jfox

Rien! Désolé!
Les deux listes s'affichent avec juste Aucun dans Auteur et Choisir un auteur dans Livres
17/03/2008, 16h38
Matthieu2000

Question bête : As tu des données dans ta base?
17/03/2008, 17h03
SpaceFrog

rien ???
même pas d'alert 8O8O8O

Code:

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!

17/03/2008, 17h43
SpaceFrog

tu testes en local ou distant ? ton serveur accepte le php ?
17/03/2008, 21h47
jfox

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:

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

Je peux les vérifier avec alert()?
18/03/2008, 08h34
SpaceFrog

le code que je t'ai donné devrait declencher un alert ... 8O
18/03/2008, 10h26
jfox

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.
18/03/2008, 10h36
SpaceFrog

fais un alert du responseText !!!!!!
au moins tu sauras ce que te retourne ta page de traitement php ...

J'ai trouvé et cela ne va pas te faire rire...
Il manquait "php" après la 1ère balise <?

Code:

1
2
3
4
5
6
7
8
<?
		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>";
			}
					?>

modifié en

Code:

1
2
3
4
5
6
7
8
<?php
		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>";
			}
					?>

Voilà, voilà :oops:
Désolé pour le dérangement et merci encore pour toutes les réponses.