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
un extrait de la page avec le code jquery
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 <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>
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.
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
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); } } ); } }); });
Je précise que la page php qui renvoie les infos pour la liste id='sous_theme' fonctionne bien.
Merci de vos suggestions
Partager