Question sur .tabs et .dialog - confirmation

**Paul75** · 25/01/2012, 22h59

Bonjour,

J'utilise Zend Framework.
J'ai besoin en fait de pouvoir vérifier au moment de changer de tabs si le formulaire a changé. S'il a changé, demande de confirmation (dialog), sinon on va au tab cliqué.

En gros je fais comme ceci :

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
$("#tabs").tabs({
					load: function(event, ui) {
						formInit = $("form").serialize();
					},
					select: function(event, ui) {
						var s = $("form").serialize();
 
						if(s != formInit) {
							return confirmChange();
						}
						else return true;
 
						return false
					}
				});
 
function confirmChange() {
	$( "#dialog:ui-dialog" ).dialog( "destroy" );
 
	$( "#dialog-confirm" ).dialog({
		resizable: false,
		closeOnEscape: false,
		height:140,
		modal: true,
		autoOpen: false,
		buttons: {
			"Oui": function() {
				$(this).dialog('close');
				return true;
			},
			"Non": function() {
				$( this ).dialog( "close" );
				return false;
			}
		}
	});
 
	$( "#dialog-confirm" ).dialog('open');
	return false;
}

Mon problème est de savoir pourquoi lorsque je clique sur Oui ou Non, cela donne pareil. Il devrait, au Oui, charger le tabs avec l'index ?

Merci de votre aide.

**SpaceFrog** · 28/01/2012, 18h43

Dans les deux cas les boutons ferment le dialog

Code :

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

1
2
3
4
5
6
7
8
9
10
11
buttons: {
			"Oui": function() {
				$(this).dialog('close');
alert('oui')
				return true;
			},
			"Non": function() {
				$( this ).dialog( "close" );
alert('non')
				return false;
			}

A mon avis tu t'es à mon avis perdu dans les return
ton confirmChange retourne toujours false à la fin ...

**Paul75** · 28/01/2012, 18h51

Envoyé par SpaceFrog

Dans les deux cas les boutons ferment le dialog

Code :

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

1
2
3
4
5
6
7
8
9
10
11
buttons: {
			"Oui": function() {
				$(this).dialog('close');
alert('oui')
				return true;
			},
			"Non": function() {
				$( this ).dialog( "close" );
alert('non')
				return false;
			}

A mon avis tu t'es à mon avis perdu dans les return
ton confirmChange retourne toujours false à la fin ...

Bonsoir,

Merci de ta réponse.

Oui je sais que j'ai un return false; à la fin et je pense que c'est normal : si je ne le met pas, il m'affiche bien la fenetre dialog mais par dessous il fait l'action de loader la page alors qu'il faut attendre que la validation sur oui ou non.
Dans mon code il passe bien à oui et à non mais fais comme si je faisait 'non'.

Merci

**danielhagnoul** · 29/01/2012, 00h24

Bonsoir

Vous avez raison, la méthode select ouvre un nouvel onglet sans attendre la réponse du dialogue alors qu'avec un simple "return false;" elle interdit bien l'ouverture d'un nouvel onglet. Je ne trouve pas la solution !

Ma page de test :

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Nunc tincidunt</a></li>
				<li><a href="#tabs-2">Proin dolor</a></li>
				<li><a href="#tabs-3">Aenean lacinia</a></li>
			</ul>
			<div id="tabs-1">
				<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
			</div>
			<div id="tabs-2">
				<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
			</div>
			<div id="tabs-3">
				<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
				<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
			</div>
		</div>
 
		<div id="dialog-confirm" title="Basic dialog">
			<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-19T12:40:51.000+01:00" pubdate>2012-01-19</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* -- */
 
			var boolOK;
 
			$( "#dialog-confirm" ).dialog({
				resizable: false,
				closeOnEscape: false,
				height:140,
				modal: true,
				autoOpen: false,
				buttons: {
					"Oui": function() {
						$(this).dialog('close');
						boolOK = true;
					},
					"Non": function() {
						$( this ).dialog( "close" );
						boolOK = false;
					}
				}
			});
 
			$("#tabs").tabs({
				select: function(event, ui) {
					$( "#dialog-confirm" ).dialog( "open" );
 
					return boolOK;
				}
			});		
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){
		});
	</script>
</body>  
</html>

**Paul75** · 29/01/2012, 00h38

Envoyé par danielhagnoul

Bonsoir

Vous avez raison, la méthode select ouvre un nouvel onglet sans attendre la réponse du dialogue alors qu'avec un simple "return false;" elle interdit bien l'ouverture d'un nouvel onglet. Je ne trouve pas la solution !

Ma page de test :

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<!-- <p>Date: <input type="text" id="datepicker"></p> -->
 
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Nunc tincidunt</a></li>
				<li><a href="#tabs-2">Proin dolor</a></li>
				<li><a href="#tabs-3">Aenean lacinia</a></li>
			</ul>
			<div id="tabs-1">
				<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
			</div>
			<div id="tabs-2">
				<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
			</div>
			<div id="tabs-3">
				<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
				<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
			</div>
		</div>
 
		<div id="dialog-confirm" title="Basic dialog">
			<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-19T12:40:51.000+01:00" pubdate>2012-01-19</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* -- */
			/*
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
			$( "#datepicker" ).datepicker({
				changeYear : true,
				maxDate: '-16y', // -16 années pour être certain que 15ans et +
				yearRange : '1900:2200'
			});
			*/
 
			$( "#dialog-confirm" ).dialog({
				resizable: false,
				closeOnEscape: false,
				height:140,
				modal: true,
				autoOpen: false,
				buttons: {
					"Oui": function() {
						$(this).dialog('close');
						return true;
					},
					"Non": function() {
						$( this ).dialog( "close" );
						return false;
					}
				}
			});
 
			$("#tabs").tabs({
				select: function(event, ui) {
					return $( "#dialog-confirm" ).dialog('open');
 
					//return false;
				}
			});		
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){
		});
	</script>
</body>  
</html>

Bonjour,

J'ai exactement fait comme vous. Et toujours pas trouvé de solution.

Par contre si je fait :

Code :

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

return confirm("Voulez-vous vraiment quitter la page (modifications perdues) ?");

...la cela fonctionne.

Juste la présentation est moins jolie.....

En tous cas merci. Et si vous trouvez une solution, je suis preneur....

A+

**danielhagnoul** · 29/01/2012, 00h51

La solution moins jolie s'impose ! Je viens de fouiller rapidement la documentation, le bug tracker et le développement ( http://jqueryui.com/development ), je n'ai pas vu mieux.

Question sur .tabs et .dialog - confirmation

jQuery

Vue hybride

Discussions similaires

Partager

Partager