mise a jour de liste [Résolu]

[bernards111]

Bonjour,

j'essaye de mettre à jour 3 liste en cascade. lorsqu'il une sélection est faite dans la première , les deux autres se mette à jour.
j'utilise la framework django et donc du python dans mon html.

le problème vient de mon fichier .js mais je bloque un peu pouvez vous m'aidez?

html

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
 
 <div>
  <form method="post"> {% csrf_token %}
  	<select name="select_espece" id="select_espece" multiple>&nbsp;&nbsp;
		<option value="ns">-- Sélectionnez une espèce --</option>
  	{% for ESPECE in latest_espece_list %}
		<option value="{{ ESPECE.ID}}">{{ ESPECE.LB_NOM}}</option>
    {% endfor %}
 
 
	    <input type="submit" value="Search" />&nbsp;&nbsp;<input type="reset" value="Reset"/>		
  	</select>
	</form>
 
 
  <form methode="post"> {% csrf_token %}
 
	<select name="select_typo" id="select_typo" multiple>&nbsp;&nbsp;
		<option value="ns">--Sélectionnez une typo ----</option>
  	{% for ESPECE in latest_typo_list %}
		<option value="{{ ESPECE.ID}}">{{ ESPECE.TYPO}}</option>
	{% endfor %}
	<br/>
	<br/>
 
 
 
 
  	<input type="submit" value="Search"/>&nbsp;&nbsp;<input type="reset" value="Reset"/>
 
   </select>
   </form>
 
   <form methode="post"> {% csrf_token %}
 
	<select name="select_habitat" id="select_habitat" multiple>&nbsp;&nbsp;
		<option value="ns">--Sélectionnez un habitat ----</option>
  	{% for ESPECE in latest_HABITAT_list %}
		<option value="{{ ESPECE.ID}}">{{ ESPECE.HABITAT}}</option>
	{% endfor %}
	<br/>
	<br/>
 
 
 
 
  	<input type="submit" value="Search"/>&nbsp;&nbsp;<input type="reset" value="Reset"/>
 
   </select>
   </form>
 </div>
 
 
    </body>
</html>

js

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
$(document).ready(function(){
 
 
                $("#select_espece").change(function(){ 
                           if($(this).val() != "ns"){
 
                               var esp = $(this).val();
 
                                $.ajax({
                                   url: "views.py",
                                   global: false,
                                   type: "POST",
                                   data: "ESPECE.ID="+esp,
                                   dataType: "html",
                                   success: function(){
                                  $("#select_typo").empty();
                                     $("#select_typo").html(msg);
 
                                $.ajax({
                                   url: "views.py",
                                   global: false,
                                   type: "POST",
                                   data: "ESPECE.ID="+esp,
                                   dataType: "html",
                                   success: function(){
                                  $("#select_habitat").empty();
                                     $("#select_habitat").html(msg);
                                 }});
 
 
 
                                 }});
 
                           }
                });
 });

merci d'avance

[Bovino]

le problème vient de mon fichier .js mais je bloque un peu

Ah oui, au moins c'est très clair expliqué comme ça !

[bernards111]

oui,

si je savais exactement ce qui ne fonctionne pas ce serait plus clair pour moi aussi!. et il est vrai que je pars d'un code déjà réaliser, peut être pas la meilleur manière d'apprendre javascript que je ne connais pas du tt, mais ça j'ai pas besoin de le dire.

sans le js ma page html s'affiche avec mes données à l'intérieur de chaque liste et trier.
avec le js, ma page est continuellement en recherche et donc vide.

je suppose dans un premier temps que je dois avoir une erreur sur l'objet document et l'appel de la méthode sur ma variable var afin de récupérer mon élément sélectionner?

[danielhagnoul]

Bonsoir

Le code HTML ? Il faudrait plutôt nous donner le code qui s'affiche dans un navigateur.

Je vois plusieurs formulaires avec <option value="{{ ESPECE.ID}}">{{ ESPECE.LB_NOM}}</option>. Espérons qu'il s'agisse à chaque fois d'un ID différent.

Le code JS ? Pourquoi deux transactions AJAX consécutives sur "views.py" !

Code :

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	url: "views.py",
	global: false,
	type: "POST",
	data: "ESPECE.ID="+esp,
	dataType: "html",
	success: function( data ){
		// le résultat de la transaction est dans data
		$("#select_habitat").html( la valeur est incluse dans data mais je ne connais pas la structure de data  );
		$("#select_typo").html( la valeur est incluse dans data mais je ne connais pas la structure de data );
	}
});

[bernards111]

bonjour,

le code qui apparaît dans le navigateur

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
 
 <div>
  <form method="post"> <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='ff39cc268a3f603aa9fcf0cacbb097d1' /></div>
  	<select name="select_espece" id="select_espece" >&nbsp;&nbsp;
		<option value="ns">-- Sélectionnez une espèce --</option>
 
		<option value="Abietinaria abietina">Abietinaria abietina</option>
 
		<option value="Abludomelita gladiosa">Abludomelita gladiosa</option>
 
		<option value="Abra alba">Abra alba</option>
 
<form methode="post"> <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='ff39cc268a3f603aa9fcf0cacbb097d1' /></div>
 
	<select name="select_typo" id="select_typo" multiple>&nbsp;&nbsp;
		<option value="ns">--Sélectionnez une typo ----</option>
 
		<option value="">Barcelone</option>
 
		<option value="">CH</option>
 
 <form methode="post"> <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='ff39cc268a3f603aa9fcf0cacbb097d1' /></div>
 
 
	<select name="select_habitat" id="select_habitat" multiple>&nbsp;&nbsp;
		<option value="ns">--Sélectionnez un habitat ----</option>
 
		<option value="">1110-1</option>
 
		<option value="">1110-2</option>
 
		<option value="">1110-3</option>

trois listes déroulante basé sur trois champs d'une même table. Une liste (n'importe laquelle) filtre les deux autres

je pensais qu'il fallait faire une transaction pour chaque liste....

[danielhagnoul]

Bonsoir

Une liste (n'importe laquelle) filtre les deux autres

Vous voulez dire qu'un changement dans n'importe quelle liste provoque des modifications dans les deux autres ? Alors, pour simplifier le traitement, il est préférable de créer trois transactions AJAX différentes, chacune appelant une méthode Python différente.

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
$("#select_espece").change(function(){
	var esp = $( this ).val();
 
	if ( esp != "ns" ){
		$.post( "/espece", { "value" : esp }, function( data, textStatus, jqXHR ){
			// debug
			//console.log( data, textStatus, jqXHR );
 
			// succès de la transaction, traité le contenu de data
 
		}).error( function( jqXHR, textStatus, errorThrown ){
			// debug
			//console.log( jqXHR, textStatus, errorThrown );
 
			// échec de la transaction, gèrer la catastrophe
 
		});
	}
});
 
$("#select_typo").change(function(){
	var esp = $( this ).val();
 
	if ( esp != "ns" ){
		$.post( "/typo", { "value" : esp }, function( data, textStatus, jqXHR ){
			// debug
			//console.log( data, textStatus, jqXHR );
 
			// succès de la transaction, traité le contenu de data
 
		}).error( function( jqXHR, textStatus, errorThrown ){
			// debug
			//console.log( jqXHR, textStatus, errorThrown );
 
			// échec de la transaction, gèrer la catastrophe
 
		});
	}
});
 
$("#select_habitat").change(function(){
	var esp = $( this ).val();
 
	if ( esp != "ns" ){
		$.post( "/habitat", { "value" : esp }, function( data, textStatus, jqXHR ){
			// debug
			//console.log( data, textStatus, jqXHR );
 
			// succès de la transaction, traité le contenu de data
 
		}).error( function( jqXHR, textStatus, errorThrown ){
			// debug
			//console.log( jqXHR, textStatus, errorThrown );
 
			// échec de la transaction, gèrer la catastrophe
 
		});
	}
});

[bernards111]

Merci de ton aide danielhagnoul !


J'aurais juste une question concernant cette partie du code :

Code :

$.post( "/espece",

Je ne comprends pas trop d'où vient la valeur "/espece" ou ce qu'elle est censé faire ?


Merci.

[danielhagnoul]

Bonjour

Dans mon exemple de code, je devais bien donner un nom à la méthode Python qui est appelée par $.post(). Dans votre code, vous lui donnerez le nom réel de votre méthode.

[bernards111]

ok,

merci encore