[AJAX] Drop down list en cascade
Bonjour
je tente de faire un script que certainements nombreux d'entre vous ont déja fait mais voilà depuis hier je m'arrache les cheveux pour le faire.
il s'agit de faire avec ajax des drop down list dépendant chacune les unes des autres.
Code:
Region-->departement-->arrondissement-->communaute
je travaille avec mootools.
Quand l'utilisateur sélectionne un parent à l'aide de l'évènement onchange je fais appel à mon script ajax qui appel le les éléments du fils immédiat.
Mais voila quand je sélectionne d'abord la région j'ai bien les départements correspondants, ainsi quand je sélectionne directement le département j'ai bien mes arrondissements donc jusque là pas de pb. Le pb commence quand l'utilisateur sélectionne d'abord la région j'ai les départements mais quand il change de département aucun appel ajax c'est comme si l'evènement n'écoutait plus le changement du département pour pouvoir afficher les arrondissements.
J'espère qu'avec ce long texte je me suis bien fait comprendre ci-dessous les scripts utilisées pour les deux évènements dans des fichiers js séparés attachés à la page web.
SELECTION d'une région pour avoir les départements correspondants
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
window.addEvent("domready", function() {
var fx=new Fx.Style($("consoleContainer"), "background-color", {duration:2000});
$("code_region").addEvent("change", function() {
$("fieldsContainer").empty().addClass("ajax-loading").setHTML("<img src='"+assetsBase+"/images/ajax-loader.gif' border='0'> "+ _LOADING_ );
var url="index.php?option=com_plha&task=getdept&format=raw&code_region="+this.getValue();
var a=new Ajax(url,{
method:"get",
onComplete: function(response) {
var resp=Json.evaluate(response);
$("fieldsContainer").removeClass("ajax-loading").setHTML(resp.html);
$("consoleContainer").setHTML(resp.msg);
$("_code_dpt").setHTML(resp.html);
fx.set("#fff").start("#f60").chain(function() {
this.start.delay(2000,this,"#FFF");
});
}
}).request();
});
}); |
SELECTION d'un département pour avoir les arrondissements correspondants
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
window.addEvent("domready", function() {
var fx=new Fx.Style($("consoleContainer"), "background-color", {duration:2000});
$("code_dpt").addEvent("change", function() {
$("fieldsContainer").empty().addClass("ajax-loading").setHTML("<img src='"+assetsBase+"/images/ajax-loader.gif' border='0'> "+ _LOADING_ );
var url="index.php?option=com_plha&task=getarrdt&format=raw&code_dpt="+this.getValue();
var a=new Ajax(url,{
method:"get",
onComplete: function(response) {
var resp=Json.evaluate(response);
$("fieldsContainer").removeClass("ajax-loading").setHTML(resp.html);
$("consoleContainer").setHTML(resp.msg);
$("_code_arrdt").setHTML(resp.html);
fx.set("#fff").start("#f60").chain(function() {
this.start.delay(2000,this,"#FFF");
});
}
}).request();
});
}); |
