3 listes déroulantes en cascade avec jquery et ajax
Bonjour à tous,
Je galère depuis pas mal de temps pour faire marcher une mise à jour en cascade de 3 listes déroulantes.
J'ai eu plusieurs personnes qui m'ont fait remanier mon code mais sans succés.
J'espère avoir plus de chance ici..
Voila ci-dessous une partie de la page contenant mon formulaire avec 4 listes déroulantes.
La première id='dpt' après selection déclenche des requêtes ajax qui mettent à jour 2 autres listes déroulante id="service_signalant" et id='theme'.
Tout cela fonctionne bien.
Par contre la liste déroulante id='theme' devrait déclencher après mise à jour une requête ajax pour mettre à jour la liste id='sous-theme'.
Et la ça ne marche pas.En mettant des alert dans le code il semblerait que l'action sur changement ne fonctionne pas.
Le formulaire
Code:
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
|
<tr>
<th scope="row"><div align="left">Département signalant</div></th>
<td><select name="dpt_signalant" id="dpt_signalant">
<option value="ns" selected>Sélectionner le dpt</option>
{section name=idx loop=$res_dpt}
<option value="{$res_dpt[idx].dys_dpt_id}">{$res_dpt[idx].dys_dpt_nom}</option>
{/section}
</select>
</td>
<th><div align="left">Service signalant</div></th>
<td><span id="maspanselectservice">
<select name="service_signalant" id ="service_signalant" >
<option value="ns" selected>Sélectionner le service</option>
</select>
</span>
</td>
</tr>
<tr>
<th scope="row"><div align="left">Thème</div></th>
<td><span id="maspanselecttheme">
<select name="theme" id="theme">
<option value="ns" selected>Sélectionner le théme</option>
<!--{section name=idx loop=$res_theme}
<option value="{$res_theme[idx].dys_themes_theme}">{$res_theme[idx].dys_themes_theme}</option>
{/section}-->
</select>
</span>
</td>
<th><div align="left">Sous_thème</div></th>
<td><span id="maspanselectsous_theme">
<select name="sous_theme" id="sous_theme">
<option value="ns" selected>Sélectionner le sous-thème</option>
<option value="so">Sans objet</option>
</select>
</span>
</td>
</tr> |
un extrait de la page avec le code jquery
Code:
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
$(document).ready(function(){
$("#dpt_signalant").change(function(){
if($(this).val() != "ns"){
var dept = $(this).val();
$.ajax({
url: "alim_services.php",
global: false,
type: "POST",
data: "dpt="+dept,
dataType: "html",
success: function(msg){
$("#maspanselectservice").empty();
$("#maspanselectservice").html(msg);
$.ajax({
url: "alim_themes.php",
global: false,
type: "POST",
data: "dpt="+dept,
dataType: "html",
success: function(msg){
$("#maspanselecttheme").empty();
$("#maspanselecttheme").html(msg);
}});
}
}
);
}
});
$("#theme").change(function(){
alert("test");
if($(this).val() != "ns"){
var theme = $(this).val();
$.ajax({
url: "alim_sous_themes.php",
global: false,
type: "POST",
data: "theme="+theme,
dataType: "html",
success: function(msg){
$("#maspanselectsous_theme").append(msg);
}
}
);
}
});
}); |
Suivant les derniers conseil que j'ai eu on m'a tout fait mettre dans le même $(document).ready(function(), mais au début les différents appels était dans des $(document).ready(function() différents.
Je précise que la page php qui renvoie les infos pour la liste id='sous_theme' fonctionne bien.
Merci de vos suggestions
