3 listes déroulantes en cascade avec jquery et ajax [Résolu]

[timmy1]

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

[erox44]

Hello,
effectivement c'est assez étrange.

Essayes ceci:
- change le selecteur de ton 2e select en faisant référence au name voir.
- crée à la mano la fonction onchange dans le html de ton select, et crée du coup une fonction à part dans le JS pour cet evenement.

[danielhagnoul]

Bonsoir

Je vous suggère de tester le code suivant :

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
/*
 * Pour agir sur du code modifié on doit
 * utiliser "on" (jQuery 1.7 et plus)
 * Avec jQuery 1.6.4 et moins : "delegate".
 *
 * Exemple avec "on", pour "delegate" voir l'API.
 * On doit donner un ID à la table, par exemple tableID.
 */
 
$("#tableID").on("change", "#dpt_signalant", 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").html(msg);
 
				$.ajax({
					url: "alim_themes.php",
					global: false,
					type: "POST",
					data: "dpt="+dept,
					dataType: "html",
					success: function(msg){
						$("#maspanselecttheme").html(msg);
					}
				});
			}
		});
	}
});
 
$("#tableID").on("change", "#theme", 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);
			}
		});
	}
});

[timmy1]

Bonjour et merci de vous intéresser à mon problème.

J'ai essayé la proposition de danielhagnoul qui me paraissait la plus simple à essayer dans un premier temps mais ça ne marche pas.Comme j'avais une anvienne version de jquery j'ai chargé la dernière pour tester avec le on mais sans résultat ou plutôt si car ça ne marche même plus pour ce qui fonctionnait.

erox44 peux-tu illuster ce que tu veux dire car le problème c'est que je connais très mal jquery.

Si vous avez d'autres idées je suis preneur car la seule solution que j'ai pour remplacer ça c'est de faire 2 formulaires de suite ce qui n'est pas très conviviale pour les utilisateurs.

Merci encore

[timmy1]

Bon j'ai réussi à faire une fonction comme le suggérait erox44 et ça marche.

Merci