3 listes liées en ajax

Chandon · 23 Octobre 2007

Bonjour à tous,

Je me lance dans le bain d'ajax...

J'essaye d'adapter le script d'ici http://siddh.developpez.com/articles/ajax/

pour le transformer non pas en 2 listes liées, mais 3...

J'ai essayé d'abord avec 2, ça fonctionne au poil.

J'ai voulu imbriquer une troisième, et là ça merdoie.

Pouvez vous m'indiquer où j'ai coincé ?

J'ai 3 tables : famille, genre, espece

famille : id_fam et nom_famille

genre : id_genre, src_id_fam et nom_genre

espece : id_spec, src_id_genre et nom_espece

Ensuite 3 fichiers :

species.php

<html>
	<head>
		<title>test 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('genre').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.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('famille');
				id_fam = sel.options[sel.selectedIndex].value;
				xhr.send("id_fam="+id_fam);
			}
			function go2(){
				var xhr = getXhr2();
				// 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('genre').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajax2.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('genre');
				id_genre = sel.options[sel.selectedIndex].value;
				xhr.send("id_genre="+id_genre);
			}		</script>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Liste liées</legend>
				<label>Famille</label>
				<select name='famille' id='famille' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						include ("connexion.php");
						$res = mysql_query("SELECT * FROM famille ORDER BY nom_famille");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_fam"]."'>".$row["nom_famille"]."</option>";
						}
					?>
				</select>
				<label>Genre</label>
				<div id='genre' style='display:inline'>
				<select name='genre'>
					<option value='-1'>Choisir un genre</option>
				</select>

				<label>Espece</label>
				<div id='espece' style='display:inline'>
				<select name='espece'>
					<option value='-1'>Choisir une espece</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajax.php, pour la construction de la liste des genres

<?php
	echo "<select name='genre' id='genre' onchange='go2()'>>";
	if(isset($_POST["id_fam"])){
		include ("connexion.php");
		$res = mysql_query("SELECT * FROM genre 
			WHERE src_id_fam=".$_POST["id_fam"]." ORDER BY nom_genre");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_genre"]."'>".$row["nom_genre"]."</option>";
		}
	}
	echo "</select>";
?>

et ajax2.php, pour la construction deslistes des espèces

<?php
	echo "<select name='espece'>";
	if(isset($_POST["id_genre"])){
		include ("connexion.php");
		$res = mysql_query("SELECT * FROM espece 
			WHERE src_id_genre=".$_POST["id_genre"]." ORDER BY nom_espece");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_spec"]."'>".$row["nom_espece"]."</option>";
		}
	}
	echo "</select>";
?>

Merci de votre aide !

Connexion

3 listes liées en ajax

Sujets conseillés

Chandon

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité