Requêtes multiples qui se lancent à tort
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:
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.
