création d'une dialogbox

**boboss123** · 27/04/2010, 14h38

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 :

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
// 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,

**domi10** · 27/04/2010, 15h17

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

Code :

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

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/

**boboss123** · 27/04/2010, 15h26

ok merci pour l'info.

Il n'y a vraiment aucun moyen pour écraser l'évènement ?

**domi10** · 27/04/2010, 15h29

Si avec unbind :

http://api.jquery.com/unbind/

**boboss123** · 27/04/2010, 15h49

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 ?

**danielhagnoul** · 28/04/2010, 08h45

Bonjour.

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

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
// 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();
}

**boboss123** · 28/04/2010, 09h51

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 :

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

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>

**danielhagnoul** · 29/04/2010, 22h31

Bonsoir.

Exemple :

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

**boboss123** · 30/04/2010, 10h48

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 :

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

création d'une dialogbox

jQuery

Discussions similaires

Partager

Partager