[AJAX] Mettre en oeuvre le tutoriel sur les listes liées

**Schim** · 07/11/2010, 17h12

Bonjour,

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

Je n'obtiens aucun résultat a part une liste déroulant avec un seul attribut "aucun"

auteurs.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","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>

ajaxLivre.php

Code php :

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","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>";
?>

Pendant que j'y suis j'ai beau faire tous les tuto je vois pas comment enrichir la bdd avec AJAX (c'est send ?)

**andry.aime** · 07/11/2010, 18h39

Bonsoir,

As tu inséré les données dans la base ?

A+.

**Schim** · 07/11/2010, 19h19

Envoyé par andry.aime

Bonsoir,

As tu inséré les données dans la base ?

A+.

Oui j'ai crée la bdd test et exécuter le fichier sql, tout est bien crée.

**Bovino** · 07/11/2010, 21h21

Tu écris

Code :

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

document.getElementById('livre')

et

Code php :

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

echo "<select name='livre'>";

et bizarrement, il se trouve que getElementById cherche un élément en fonction de son id, pas de son name

Sauf éventuellement pour IE qui considère l'attribut name comme un attribut de type id et qui crée la confusion...

EDIT : Ceci dit, si tu essaye d'insérer une balise select dans une autre balise select, autant dire que ça ne va que moyennement le faire

**andry.aime** · 08/11/2010, 14h00

Re,
+1 Bovino

mysql_connect("localhost","root","root");
mysql_select_db("test");

ces données sont aussi les mêmes que chez toi?

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
mysql_connect("localhost","root","root") or die("Impossible de se connecter : " . mysql_error());
mysql_select_db("test") or die("Erreur de  : " . mysql_error());
$res = mysql_query("SELECT * FROM auteur ORDER BY nom") or die("Erreur de requete : " . mysql_error());
?>
<select name='auteur' id='auteur' onchange='go()'>
   <option value='-1'>Aucun</option>
	<?php
	   while($row = mysql_fetch_assoc($res)){
		echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
		}
	?>
</select>

J'ai peur que les erreurs sont générés à l'intérieur du select et ne sont pas affichés sur la vue générée par le navigateur sinon pour les versions récentes de php tu dois utiliser <?php ?> à la place de <? ?>.

A+.

[AJAX] Mettre en oeuvre le tutoriel sur les listes liées

AJAX

Vue hybride

Discussions similaires

Partager

Partager