[AJAX] résultats d'une liste déroulante en fonction d'une autre liste

**jonnyboy** · 18/09/2007, 08h55

Bonjour à tous,

j'ai dans un formulaire une première liste déroulante contenant plusieurs rubriques qui sont présentes en base de données.

Dans ce même formulaire, juste en dessous, je dois avoir une liste déroulante contenant les sous rubriques de la rubrique sélectionné précédement, sous rubriques étant aussi présente en base de données.

J'aurais aimé savoir :
- s'il était possible de caché la liste des sous rubriques tant qu'une rubrique n'a pas été sélectionnée ;

-comment faire pour récupérer les sous rubriques en fonction de la rubrique sélectionné (doit-on recharger la page ?).

Merci d'avance

**Bisûnûrs** · 18/09/2007, 09h11

Il y a un topic juste au-dessus du tien dans le forum intitulé :

Important : Listes déroulantes liées entre elles

De manière générale, merci de faire une recherche, c'est un sujet abordé des dizaines de fois.

**jonnyboy** · 18/09/2007, 18h26

Désolé :s.

J'ai essayé avec la méthode utilisant l'ajax. Le problème est que la première fois que je sélectionne ma rubrique, mes sous rubriques s'affiche bien en dessous de celle ci. Mais lorsque je sélectionne une autre rubrique, plus rien ne s'affiche dans la liste déroulante des sous rubriques.

Voila mon code :

recupSousRubrique.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
<?php
include("../../class/4pat/init.php"); 
include("../../class/canissimo/init.php"); 
echo "<select name='sousrubrique' id='sousrubrique' style='width: 161px;'>";
if(isset($_POST["idRubrique"])){
//      mysql_connect("localhost","quatrePat","gtr48fd");
//      $res = mysql_query("SELECT * FROM 4pat_sous_section_section_faq WHERE ID_section_faq=".$_POST["idRubrique"]);
        $res = connexion->Request("SELECT * FROM 4pat_sous_section_section_faq WHERE ID_section_faq=".$_POST["idRubrique"]);
        $numRes = mysql_num_rows($res);
        echo
        if($_POST["idRubrique"]=="aucune"){
                echo "<option value='-1'>Choisir une rubrique</option>";
        } else {
                if($numRes!=0){
                        while($row = mysql_fetch_assoc($res)){
                                        echo "<option value='".$row["ID_sous_section_section_faq"]."'>".$row["nom_sous_section_section_faq"]."</option>";
                                }
                } else {
                        echo "<option value='-1'>-- Vide --</option>";
                }
        }
}
echo "</select>";
 
?>

pagePrincipale :
entre <head> et </head> :

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
<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(){
		alert('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('sousrubrique').innerHTML = leselect;
			}
		}
 
		// Ici on va voir comment faire du post
		xhr.open("POST","recupSousRubrique.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('rubrique');
		idRubrique = sel.value;
		xhr.send("idRubrique="+idRubrique);
		alert('end go!');
	}
</script>

dans le body :

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
<tr>
		  	<td width="20%" valign="top"><img src="../icons/arrow.gif" width="10" height="9" align="absmiddle"> Rubrique <span class="rouge"> *</span> : </td>
			<td>
			<select alt='needed' name="type" id="rubrique" style="width: 161px;" onChange='go()'>
			<option value="aucune">-- Votre choix --</option>
			<?	while($row = mysql_fetch_row($rubriques)){?>
					<option value=<? echo"{$row[0]}" ?>> <? echo "{$row[1]}\n"; ?> </option> <?
 				}	?>
			</select>
			<input type="button" name="Submit" value="Créer" onClick="PopupCentrer('admin_section.php?nom_module=<? echo $nomModule; ?>','adminSection',550,250,'menubar=no,scrollbars=yes,statusbar=no');">
			</td>
		  </tr>
          </table></td></tr>
 
		  <tr><td><table width="100%"  border="0" cellpadding="0" cellspacing="0" class="bleu">
		  <tr>
		  	<td width="20%" valign="top"><img src="../icons/arrow.gif" width="10" height="9" align="absmiddle"> Sous-rubrique<span class="rouge"> *</span> : </td>
			<td>
			<div id='sousrubrique' style='display:inline;'>
			<select name='sousrubrique' id='sousrubrique' style="width:161px;">
				<option value='-1'>Choisir une rubrique</option>
			</select>
			</div>
			<input type="button" name="Submit" id="creer-sous-rubrique" value="Créer" onClick="PopupCentrer('admin_sous_section.php?nom_module=<? echo $nomModule; ?>','adminSousSection',550,250,'menubar=no,scrollbars=yes,statusbar=no');">
			</td>
		  </tr>
          </table></td></tr>

Quelqu'un verrait-il d'ou cela vient ?

**goulmak** · 18/09/2007, 20h21

Salut, il y a aussi un autre sujet ici http://developpez.net/forums/showthread.php?t=404940

La personne était bloquée comme toi et le problème venait du fait que le div qui contient la sous liste avait le même id que la dite liste. C'est précisément ton cas, tu as un <div id='sousrubrique'...> et aussi un <select id='sousrubrique'...>

Tu peux essayer de changer les noms pour éviter les redondances et peut-être (je l'espère) corriger ton problème. Sinon je rappelle qu'un id est fait pour être unique, il faut éviter d'en mettre plusieurs identiques.

**jonnyboy** · 19/09/2007, 09h19

Merci bien, effectivement c'était bien ca :d.

++

**jonnyboy** · 19/09/2007, 10h27

Dernier petit problème dont je n'arrive pas à trouver la solution.
J'ai donc modifier le nom de ma div en "sousrub" et modifier ma fonction go() en remplacant la ligne :

Code :

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

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

par

Code :

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

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

Lors de la validation de mon formulaire, j'appel la fonction suivante :

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
function Check(formulaire) { // Fonction appel&eacute;e par le bouton
	  var errmsg = "Erreur : \n";
	  for(i=0;i<formulaire.elements.length;i++)
	  {
	  	alert(formulaire.elements[i].name + " :: " + formulaire.elements[i].value);
		  if ((formulaire.elements[i].alt == "needed") && (formulaire.elements[i].value == "Completez ici" || formulaire.elements[i].value == "" )) 
		  { 
			 errmsg=errmsg+"-Votre "+formulaire.elements[i].id+" est obligatoire. \n"; 
		  }
	  }
	  if(formulaire.actu.value.length == 0){
	  	errmsg=errmsg+"-Votre question est obligatoire. \n"; 
	  } 
	  if(formulaire.reponse.value.length == 0){
	  	errmsg=errmsg+"-Votre réponse est obligatoire. \n"; 
	  } 
	  if(formulaire.rubrique.value == "aucune"){
	  	errmsg = errmsg+"-Votre rubrique est obligatoire. \n";
	  }
	  if(formulaire.sousrubrique.value == 0){
	  	errmsg = errmsg + "-Votre sous rubrique est obligatoire. \n";
	  }
	  if(formulaire.produitAssocie.value == "0"){
	  	errmsg = errmsg + "-Votre produit à associer est obligatoire. \n"
	  }
 
	  if(errmsg != "Erreur : \n")
	  {
		 alert(errmsg); 
		 return false;
	  }
	 return true;  
   }

Lorsque je n'ai rentré aucune valeur dans ma liste déroulante rubrique (donc rien également dans ma liste sous rubrique), mon alert au début de ma fonction check trouve bien mon élément sousrubrique.

En revanche, lorsque j'ai sélectionner une rubrique (donc une sous rubrique vue que les listes sont liés), mon alert ne m'affiche plus mon élément sousrubrique :s.

Du coup, je n'ai plus la possibilité de récupéré la valeur de la sous rubrique selectionnée.

[AJAX] résultats d'une liste déroulante en fonction d'une autre liste

JavaScript

Vue hybride

Discussions similaires

Partager

Partager