Sujet Précédent Sujet Suivant

Listes déroulantes liées

Fermé
yasean - 17 juin 2011 à 18:01
kshaad Messages postés 13 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 30 juin 2011 - 30 juin 2011 à 10:54
Bonjour,

J'ai trouvé un tutoriel sur les listes déroulantes liées sur ce site : http://siddh.developpez.com/articles/ajax/#LIV-A

pour mon cas j'ai envie d'afficher deux listes déroulantes celle des catégories et celle des sous categories reliée a cette derniere par "idcat"

Je comprend bien le principe, j'ai voulu l'appliquer mais je n'arrive toujours pas à afficher ni la liste des catégories ni celle des sous categories.

Voila ma base : 

CREATE TABLE 'cat_service' (
  'idcat' int(20) NOT NULL auto_increment,
  'nom' varchar(50) NOT NULL,
  PRIMARY KEY  ('id')
);



CREATE TABLE 'sous_cat_ser' (
  'idss_catser' int(20) NOT NULL auto_increment,
  'nomss_catser' varchar(50) NOT NULL,
  'idcat' int(20) default NULL,
  PRIMARY KEY  ('id')
) ;




Voila mon code

Le fichier rechercher.html 


<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('souscat').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","recherche1.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('cat');
				idCat = sel.options[sel.selectedIndex].value;
				xhr.send("idcat="+idCat);
			}
		</script>
</head>
	
<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Catégories</label>
				<select name='cat' id='cat' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("SPIP");
						$res = mysql_query("SELECT * FROM cat_service ORDER BY nomcat");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["idcat"]."'>".$row["nomcat"]."</option>";
						}
					?>
				</select>
				<label>Sous catégories</label>
				<div id='souscat' style='display:inline'>
				<select name='souscat'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
</body>
</html>


Et mon fichier rechercher.php : 

<?php
	echo "<select name='souscat'>";
	if(isset($_POST["idcat"])){
		mysql_connect("localhost","root","");
		mysql_select_db("SPIP");
		$res = mysql_query("SELECT idss_catser,nomss_catser FROM sous_cat_service 
			WHERE sous_cat_service.idcat=".$_POST["idcat"]." ORDER BY nomss_catser");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["idcat"]."'>".$row["nomcat"]."</option>";
		}
	}
	echo "</select>";
?>


1 réponse

Réponse 1 / 1
kshaad Messages postés 13 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 30 juin 2011
30 juin 2011 à 10:54
Bonjour,

Pour moi je fais la même chose et ça marche, regarde sur mon code; Sinon pour toi la seule chose que j'ai remarqué c'est le nom du fichier PHP : rechercher.php , car sur l'appel dans la fonction JS tu as mis xhr.open("POST","recherche1.php",true);
méfier toi si c'est le bon nom!!!!

voilà mon code à moi:

Fichier de mon formulaire principale:

/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
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('famille').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","form/Ajaxfamille.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('categorie');
idcat = sel.options[sel.selectedIndex].value;
xhr.send("idCat="+idcat);
}
....
....
....
.....
.....
....
...
..

<!-- Connexion BDD -->
<?php include("connexion.php");?>

<!-- déclaration requete sql -->
<?php
$query=mysql_query("select Categorie from Categorie");
?>

<!-- affectation des données dans la liste déroulante -->
<tr>
<td align="left" bgcolor="E6E6E6">Catégorie</td>
<td align="left" bgcolor="E6E6E6">
<select name='categorie' id='categorie' onChange='go()'>
<option value='-1'>Aucun</option>
<?php
$res = mysql_query("SELECT * FROM categorie ORDER BY Categorie");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["IdCategorie"]."'>".$row["Categorie"]."</option>";
}

?>
</select>

</td>
</tr>
<tr>
<td align="left" bgcolor="E6E6E6">Famille</td>
<td width="76%" align="left" bgcolor="E6E6E6">

<select name='famille' id='famille' onchange='goesp()'>
<option value='-1'>--------------------</option>
</select>
</td>


Fichier Ajaxfamille.php:


<?php

echo "<select name='famille' id='famille' onchange='goesp()'>";
if(isset($_POST["idCat"])){
mysql_connect("localhost","root","");
mysql_select_db("db_promark");
$res = mysql_query("SELECT * FROM famille WHERE IdCategorie=".$_POST["idCat"]." ORDER BY NomFamille");
echo"<option value='-1'>Aucun</option>";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["IdFamille"]."'>".$row["NomFamille"]."</option>";
}
}
else
echo "<option value='-1'>Choisir categorie</option>";
echo "</select>";

?>


j'espère que ça soit utile pour toi...
0

Discussions similaires

pb imprimante introuvable sous adobe reader
ctatav -
LionHell -

16 réponses
Dossier Android/data invisible
Cucus_4732 -
BunoCS -

2 réponses
additionner deux listes element par element
rahim -
S -

1 réponse
LISTE M3U
FOUAD_9000 -
alex_8561 -

5 réponses
prince of persia
LYLALY -
La tite bretonne du 82 -

16 réponses