création d'une dialogbox

Version imprimable

bonjour,

je me suis fait une petite fonction qui affiche une dialogBox paramêtrable avec deux boutons (oui/non). Le code pour l'afficher :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // affiche la boite de confirmation function showConfirmBox(title, str, funcYes){ $("#dgbox_confirm h3").text(title); // change le titre $("#dgbox_confirm #cfm_msg").text(str); // change le texte // gestion du bouton Yes $("#dgbox_confirm #btnYes").click(funcYes); // gestion du bouton No $("#dgbox_confirm #btnNo").click(function(){ alert("fermeture"); $("#dgbox_confirm").hide(); }); $("#dgbox_confirm").show(); }
=> je ne comprends pas pourquoi mais
- lorsque j'ouvre pour la 1ere fois la dialogBox et que je clic sur No, alert("fermeture"); s'affiche 1 fois avant de cacher la div
- lorsque j'ouvre pour la 2nd fois la dialogBox et que je clic sur No, alert("fermeture"); s'affiche 2 avant de cacher la div
- lorsque j'ouvre pour la 3ieme fois la dialogBox et que je clic sur No, alert("fermeture"); s'affiche 3 avant de cacher la div
...

D'où vient le problème et comment le résoudre ?
=> je pense que le problème doit venir de la déclaration de mes évènements

merci d'avance,

A chaque ouverture de la dialog box, un évènement click est rajouté.
Il faut placer le code suivant :
Code:

1 2 3 4 5 6 7 8 // gestion du bouton Yes $("#dgbox_confirm #btnYes").click(funcYes); // gestion du bouton No $("#dgbox_confirm #btnNo").click(function(){ alert("fermeture"); $("#dgbox_confirm").hide(); });
à l'extérieur de la fonction d'ouverture.
Avec jQuery les évènements sont ajoutés et ne remplacent pas l'évènement click précédent.

Dominique
http://helpdesk.toitl.com/

27/04/2010, 15h26
boboss123

ok merci pour l'info.

Il n'y a vraiment aucun moyen pour écraser l'évènement ?
27/04/2010, 15h29
domi10

Si avec unbind :

http://api.jquery.com/unbind/
27/04/2010, 15h49
boboss123

ok merci ça marche nickel

Sans utiliser unbind, j'arrive à gérer correctement le bouton No mais pour le bouton yes (qui utilise funcYes), je ne vois pas comment faire (vu que funcYes peut changer de valeur après l'initialisation) ?
=> c'est possible ?

Bonjour.

Il m'est impossible de tester sans le reste du code. Essayer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// affiche la boite de confirmation
function showConfirmBox(title, str, funcYes){
 
	$("#dgbox_confirm h3").text(title); // change le titre
	$("#cfm_msg").text(str); // change le texte 
 
	// gestion du bouton Yes	
	$("#btnYes").click(function(){
		funcYes();
		return false;
	});
 
	// gestion du bouton No
	$("#btnNo").click(function(){
		alert("fermeture");
		$("#dgbox_confirm").hide();
		return false;
	});
 
	$("#dgbox_confirm").show();
}

merci mais ça ne fonctionne pas (le "return false" n'empêche pas l'empilage des évènements)
=> ça appelle plusieurs fois les fonctions si j'affiche plusieurs fois la dialogBox

pour le code de la dialog box, c'est
Code:

1 2 3 4 5 6 7 8 9 10 <div id="dgbox_confirm" class="db_frame"> <div class="db_titlebar"> <h3></h3> <a href="#"></a> </div> <div class="db_content"> <p id="cfm_msg"></p> <p class="db_btn"><input type="button" id="btnYes"/><input type="button" id="btnNo"/></p> </div> </div>

Bonsoir.

Exemple :

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		.db_frame {
			display:none;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
 	<script>
		function showConfirmBox(title, str, funcYes){
 
			$("#dgbox_confirm h3").text(title);
			$("#cfm_msg").text(str);
 
			// un événement click est construit à chaque appel de la fonction
			// si n appels alors n événements sont construits
			$("#btnYes").click(function(event){
				$(this).unbind("click"); // supprime l'événement en cours
				$("#dgbox_confirm").hide();
				funcYes(event);
				return false;
			});
 
			// un événement click est construit à chaque appel de la fonction
			// si n appels alors n événements sont construits
			$("#btnNo").click(function(){
				$(this).unbind("click"); // supprime l'événement en cours
				$("#dgbox_confirm").hide();
				return false;
			});
 
			$("#dgbox_confirm").show();
		}
 
		$(function(){
			$("#btn").click(function(){
				showConfirmBox("Titre du dialogue", "Texte du dialogue", function(event){
					// Firebug
					console.log(new Date(event.timeStamp).toLocaleString());
 
					// sans $(this).unbind("click") si n ouvertures alors n alertes !
				});
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn">Show confirm</button>
 
		<div id="dgbox_confirm" class="db_frame">
			<div class="db_titlebar">
				<h3></h3>
				<a href="#"></a>
			</div>
			<div class="db_content">
				<p id="cfm_msg"></p>
				<p class="db_btn">
					<input type="button" id="btnYes"/>
					<input type="button" id="btnNo"/>
				</p>
			</div>
		</div>
	</div>
</body>  
</html>

attention, ton exemple ne fonctionne pas (me semble t-il) : on est obligé de faire des unbind (donc le principe reste le même) :

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
		
		/* TEST */
		.db_frame {
			display:none;
		}
	</style>
	<script charset="utf-8" src="jquery-1.4.2.js"></script>
 	<script>
		function showConfirmBox(title, str, funcYes){
			
			$("#dgbox_confirm h3").text(title);
			$("#cfm_msg").text(str);

			$("#btnYes").unbind("click");  // supprime l'événement			
			$("#btnNo").unbind("click");  // supprime l'événement
			
			// un événement click est construit à chaque appel de la fonction
			// si n appels alors n événements sont construits
			$("#btnYes").click(function(event){
				$("#dgbox_confirm").hide();
				funcYes(event);
				return false;
			});
			
			// un événement click est construit à chaque appel de la fonction
			// si n appels alors n événements sont construits
			$("#btnNo").click(function(){
				console.log("btnNo");
				$("#dgbox_confirm").hide();
				return false;
			});
			
			$("#dgbox_confirm").show();
		}
		
		$(function(){
			$("#btn").click(function(){
				showConfirmBox("Titre du dialogue", "Texte du dialogue", function(event){
					// Firebug
					console.log("btnYes");
					// sans $(this).unbind("click") si n ouvertures alors n alertes !
				});
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn">Show confirm</button>
		
		<div id="dgbox_confirm" class="db_frame">
			<div class="db_titlebar">
				<h3></h3>
				<a href="#"></a>
			</div>
			<div class="db_content">
				<p id="cfm_msg"></p>
				<p class="db_btn">
					<input type="button" id="btnYes"/>
					<input type="button" id="btnNo"/>
				</p>
			</div>
		</div>
	</div>
</body>  
</html>