3 listes déroulantes interconectées

3 listes déroulantes interconectées - HTML/CSS - Programmation

Marsh Posté le 30-04-2007 à 14:06:14    

Salut à tous,
 
J'ai 3 listes déroulantes : (1) Thème général, (2) Sous-thème, et (3) Sous-sous-thème.
 
Quand on choisit un thème général, la liste (2) se rafraichit pour n'afficher que les sous-thèmes liés au thème général sélectionné. Ca, j'arrive à faire (en Ajax, que je connais encore très mal)
 
Le problème est qu'une fois qu'on sélectionne un sous-thème dans la liste (2), je veux que la liste (3) s'actualise à son tour, pour n'afficher que les sous-sous-thèmes liés au sous-thème sélectionné. Je sais pas si c'est clair !
 
J'ai 3 pages. La principale contient le form, il s'agit de index.php :
 
 
[ index.php ]
 
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
 
function sendData(param, page, num)
{
if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP" ) ; // IE
else var XhrObj = new XMLHttpRequest(); // Mozilla
 
if (num==2)
var content = document.getElementById("liste2" );
else
{  
if (num==3)
var content = document.getElementById("liste3" );
}
 
XhrObj.open("POST", page);
 
XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4 && XhrObj.status == 200)
content.innerHTML = XhrObj.responseText ;
}
 
XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(param);
}
</SCRIPT>
</HEAD>
<BODY>
 
 
 
<FORM METHOD=POST ACTION="onsenfout.php">
<SELECT name="cat1" OnChange="sendData('id='+this.value,'liste2.php', 2)" onKeyUp="sendData('id='+this.value,'liste2.php', 2)">
<OPTION VALUE=""></OPTION>
<OPTION VALUE="5">valeur1</OPTION>
</SELECT>
 
 
<br><br>
 
 
<div id="liste2">
<SELECT name="cat2" OnChange="sendData('id='+this.value,'liste3.php', 3)" onKeyUp="sendData('id='+this.value,'liste3.php', 3)">
</SELECT>
</div>
 
 
<br>
 
 
<div id="liste3">  
<SELECT name="cat3"></SELECT>  
</div>
 
 
</FORM>
</BODY>
 
 
Puis il y a 2 autres pages qui contiennent chacune ce que devrait contenir le liste des sous-thèmes et celle des sous-sous-thèmes :
 
 
 
[ liste2.php ]
 
<SELECT name="cat2">
<OPTION VALUE="t">liste2_valeur1</OPTION>
<OPTION VALUE="t">liste2_valeur2</OPTION>
</SELECT>
 
 
[ liste3.php ]
 
<SELECT name="cat3">
<OPTION VALUE="t">liste3_valeur1</OPTION>
<OPTION VALUE="t">liste3_valeur2</OPTION>
<OPTION VALUE="t">liste3_valeur3</OPTION>
<OPTION VALUE="t">liste3_valeur4</OPTION>
</SELECT>
 
 
 
Ces 2 dernières pages affichent n'importe quoi, mon problème ne se situe pas à ce niveau. Quand on sélectionne quelquechose dans la liste (1), la liste (2) s'actualise en lisant ce qu'il y a dans la page liste2.php
 
Mon problème est que quand on sélectionne ensuite quelquechose dans la liste (2), il se passe rien du tout. Le broswer ne lit même pas la page "liste3.php" et la liste (3) ne s'actualise pas. Pouvez-vous résoudre ce problème ?
 
Ziglouglou.

Reply

Marsh Posté le 30-04-2007 à 14:06:14   

Reply

Marsh Posté le 30-04-2007 à 14:14:10    

ziglouglou a écrit :

<SELECT name="cat2" OnChange="sendData('id='+this.value,'liste3.php', 3)" onKeyUp="sendData('id='+this.value,'liste3.php', 3)">
</SELECT>


 
Juste une idée comme ça : peut-être que c'est la liste vide à l'initialisation qui ne lui plait pas.
As-tu la même chose si dans ton <select></selection> tu ajoutes une ligne vide pour l'initialisation ?
 
<option value="">&nbsp;</option>
 

ziglouglou a écrit :

Le broswer ne lit même pas la page "liste3.php" et la liste (3) ne s'actualise pas


 
Ok mais au moins est-ce que tu entres dans ta fonction js ?

Reply

Marsh Posté le 30-04-2007 à 21:32:54    

Négatif, avec un Alert("machin" ) placé en début de fonction j'ai pu voir que la fonction ne s'exécute même pas.
 
<option value="">&nbsp;</option> -> Aucun changement :/

Reply

Marsh Posté le 02-05-2007 à 14:50:15    

ziglouglou a écrit :

Négatif, avec un Alert("machin" ) placé en début de fonction j'ai pu voir que la fonction ne s'exécute même pas.
 
<option value="">&nbsp;</option> -> Aucun changement :/


 
 :( Bon ... et si tu mets ton alert("machin" ) dans le onChange tu as pareil je suppose ... :heink:  
Faut que je réfléchisse/cherche un peu...
 
Si tu trouves avant moi, poste ta solution, ça m'intéresse.
 
 :hello:

Reply

Marsh Posté le 03-05-2007 à 21:54:12    

Quelqu'un a résolu mon problème si ca vous intéresse :
 
**
 
Dans liste2.php :  
 
<SELECT name="cat2" OnChange="sendData('id='+this.value,'liste3.php', 3)" onKeyUp="sendData('id='+this.value,'liste3.php', 3)">  
 
au lieu de  
 
<SELECT name="cat2>  
 
**
 
Résultat : j'ai maintenant 4 listes reliées qui s'actualisent parfaitement sans rechargement de page. Dans mon code j'alimente les listes par requetes SQL. Au chargement initial de la page principale index.php, les listes sont toutes vides sauf la première. C'est dans les pages liste2.php, liste3.php, etc qu'à chaque fois je remplis la liste correspondante à coup d'SQL.
J'espère que ce thread sera utile à quelqu'un. (à moustik510 déjà!)

Reply

Marsh Posté le 04-05-2007 à 09:36:38    

ziglouglou a écrit :

J'espère que ce thread sera utile à quelqu'un. (à moustik510 déjà!)


 
Oui si j'ai un soucis, je testerai en ajoutant onKeyUp()  :hello:  
Pour le moment j'en ai pas besoin, j'ai une seule liste à mettre à jour (à partir d'une première liste ou d'une date renseignée dans un <input text> )
 
Tchao.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed