Requêtes multiples qui se lancent à tort

**almoha** · 01/02/2013, 21h38

Bonjour,

Avec le code suivant, je simule le clic sur le bouton "parcourir" de l'un des champs de type file présents dans la page, ceci pour choisir/modifier et afficher des images dans les DIV associées. Au changement de la valeur de l'un de ces inputs, je déclenche une requête ajax pour enregistrer le changement d'image dans ma bdd :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<script language="Javascript">
 
$(document).ready(function(){
 
//pour simuler click sur bouton "parcourir" d'un input de type file
$(".parcours_dd").click(function(){
 
var id_contrib_ajax = $(this).next('input').val();
 
var el = $(".file_img"+id_contrib_ajax);
 
if (el) {
 
el.click();
 
	}
 
//bind sur changement de la valeur du champ input file
$(".file_img"+id_contrib_ajax).change(function(){
 
var myimg = $(".file_img"+id_contrib_ajax).val();
 
var html = '<img style="height : 100px;width : 75px;"src="couvertures/miniatures/'+myimg+'" />';
 
//affichage de l'image dans la DIV
$(".image"+id_contrib_ajax).html(html);
 
//REQUETE AJAX pour modifier le nom de la photo dans la bdd
		$.ajax({
                url: 'quick_modif_photo.php',  
		type: 'POST',
                data:{modif_photo_id : id_contrib_ajax, nom_photo: myimg},
		dataType: "html",
 
			success:function(data){	
			alert(data);
 
			}//FIN SUCCESS AJAX
 
		});//FIN APPEL AJAX
 
	});//FIN CHANGE INPUT FILE
 
});//FIN CLICK PARCOURIR
 
 
});//FIN ONREADY
 
</script>
 
<body>
 
<!--HTML généré dynamiquement en PHP-->		
<span class="parcours_dd">parcourir disque dur</span>	
 
 
<input type="hidden" id="photo74" value= "74"/>
 
 
<input type="file" name="file_img" class="file_img74" style="display:none;"/>
 
 
<div class="image74"></div>
 
 
 
<span class="parcours_dd">parcourir disque dur2</span>	
 
 
<input type="hidden" id="photo75" value= "75"/>
 
 
<input type="file" name="file_img" class="file_img75" style="display:none;"/>
 
 
<div class="image75"></div>
 
<!--HTML généré dynamiquement en PHP-->		
 
 
</body>

Le choix et l'affichage des photos fonctionnent.
Mais avec Firebug, je me rends compte qu'à chaque clic (au delà du 1er) sur le même <span> "parcourir", il est généré autant de requêtes ajax simultanées que de nombre de clics. Si c'est la 2eme fois que je clique sur ce span, 2 requêtes en doublon se font en même temps; au 3eme clic ce sont 3 requêtes qui sont faites, etc. Pouvez-vous m'aider à régler ce dysfonctionnement ? Merci.

**danielhagnoul** · 02/02/2013, 01h03

Bonsoir

Vous construisez un gestionnaire d'événement dans un gestionnaire d'événement ! Chaque événement "click" sur un élément $( ".parcours_dd" ) abouti à la construction d'un nouveau gestionnaire $( ".file_img"+id_contrib_ajax ).change().

**almoha** · 02/02/2013, 10h09

Merci de votre remarque. J'ai donc dissocier mes deux gestionnaires d'événement :

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
$(document).ready(function(){
$(".parcours_dd").click(function(){
var id_contrib_ajax = $(this).next('input').val();
var el = $(".avatar"+id_contrib_ajax);
if (el) {
el.click();
	}
});//FIN CLICK PARCOURIR
$(".avatar"+id_contrib_ajax).change(function(){
var mypath = $(".avatar"+id_contrib_ajax).val();
var html = '<img style="height : 100px;width : 75px;"src="couvertures/miniatures/'+mypath+'" />';
$(".image"+id_contrib_ajax).html(html);
		$.ajax({
        url: 'quick_modif_photo.php',  
	  type: 'POST',
        data:{modif_photo_id : id_contrib_ajax,nom_photo: mypath},
	dataType: "html",
			success:function(data){	
			alert(data+'\n'+id_contrib_ajax);
			}//FIN SUCCESS AJAX
		});//FIN APPEL AJAX
	});//FIN CHANGE INPUT FILE
});//FIN ONREADY

Mais du coup j'ai l'erreur normale suivante dans firebug :

ReferenceError: id_contrib_ajax is not defined
[Stopper sur une erreur]

$(".avatar"+id_contrib_ajax).change(function(){

Pour que mon système fonctionne, il convient que je récupère, lors du change, la valeur du champ hidden qui suit le <span class="parcours_dd"> que je viens de cliquer. Cette valeur me permet de cibler le bon input file et la bonne DIV pour afficher l'image. Voyez-vous comment arriver à ce résultat ? Merci.

**danielhagnoul** · 02/02/2013, 11h45

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
$( "input[name='file_img']" ).change( function(){
	var id_contrib_ajax = $( this ).attr( "class" ).slice( -2 ),
		myimg = $( this ).val();
 
	//affichage de l'image dans la DIV
	$( "div.image" + id_contrib_ajax ).html( '<img style="height:100px;width:75px;" src="couvertures/miniatures/'+myimg+'" />' );
 
	//REQUETE AJAX pour modifier le nom de la photo dans la bdd
	$.ajax({
                "url" : "quick_modif_photo.php",  
		"type" : "POST",
                "data" :{ "modif_photo_id" : id_contrib_ajax, "nom_photo" : myimg},
		"dataType" : "html",
		"success" : function( data ){	
			alert( data );
		}
	});
});

**almoha** · 02/02/2013, 13h59

Merci beaucoup pour ce code fonctionnel

Requêtes multiples qui se lancent à tort [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager