mise a jour de liste

**bernards111** · 31/01/2012, 10h39

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 :

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
 
 <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 :

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
$(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** · 31/01/2012, 10h48

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** · 31/01/2012, 11h51

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** · 01/02/2012, 00h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 02/02/2012, 13h03

bonjour,

le code qui apparaît dans le navigateur

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
 
 <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** · 02/02/2012, 21h38

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 :

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
$("#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
 
		});
	}
});

mise a jour de liste

jQuery

Vue hybride

Discussions similaires

Partager

Partager