jQuery UI Dialog et compteur

**Royade** · 03/03/2013, 12h14

Bonjour, n'étant pas très compétent en js je viens vous expliquer mon petit soucis!

J'ai une fenêtre qui s'ouvre lorsque l'on clique sur le lien/bouton affichant 2 autres boutons "envoyer" et "annuler", quand on appui sur envoyer un message s'affiche et la fenêtre se ferme au bout de 10 secondes, j'ai mis un compteur pour voir les secondes defilé. Le problème vient du compteur, quand je recharge la page je vois bien effectivement les 10 secondes defilées, parcontre lorsque je reteste directement en cliquant de nouveau sur le lien/bouton le compteur marche qu' à moitié, les secondes defile plus rapidement ou bien ça passe de 10 a 6 secondes pour repassé a 9, ou bien même la fenêtre se ferme directement.. bref celui ci en fait qu' a ca tête.

Je vous mets ma page:

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
 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
 
<script>
 
$(function()
{
    $( "#dialog" ).dialog
    ({
        autoOpen: false,
        show:
        {
            effect: "size",
            duration: 1000
        },
        resizable: false,
        height:180,
        modal: true,   
        buttons:
        {
            "Envoyer": function()
            {
                $(function()
                {
                    $( "#dialog-message" ).dialog
                    ({
                        resizable: false,
                        height:180,
                        modal: true,
 
                        buttons:
                        {
                            "Fermer la fênetre": function()
                            {
                                $( this ).dialog( "close" );
                            }
                        }
                    });
 
                    dec();
                });
 
                $( this ).dialog( "close" );
            },
            "Annuler": function()
            {
                $( this ).dialog( "close" );
            }
        }
    });
 
    $( "#opener" ).click
    (
        function()
        {
            $( "#dialog" ).dialog( "open" );
        }
    );
 
    function dec()
    {                  
        var cpt = 10;
 
        timer = setInterval(function()
        {
            if(cpt>0)
            {                      
                document.getElementById("mssg").innerHTML = "La page se fermera automatiquement dans " + cpt + "sec" ;
                --cpt;
            }
            else
            {
                $("#dialog-message").dialog( "close" );    
            }
        }, 1000);
    }
});
</script>
 
</head>
<body>
 
<div id="dialog" style="font-size:15px;" title="yop">
<p style="font-size:13px;"><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<button id="opener">Open Dialog</button>
 
 
<div style="display: none;" id="dialog-message" title="yop envoyé">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.  
    </p>
    <p style="font-size:15px;" id="mssg"> </p>
</div>
 
 
</body>
</html>

Si quelqu'un a une petite idée, je suis preneur.

**danielhagnoul** · 03/03/2013, 21h54

Bonsoir

Concernant le décompte, vous n'aurez jamais la précision d'un chronomètre.

Code corrigé, mais incorporer dans ma page de test. Il suffit de copier-coller pour tester :

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="viewport" content="initial-scale=1.0">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js",
			"https://raw.github.com/janl/mustache.js/master/mustache.js",
			"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js"
		);
 
		/*
		 * "http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"
		 * 
		 * "http://code.jquery.com/jquery-migrate-1.1.0.min.js",
		 */
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST */
		#dialog, #dialog-message { display: none; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="dialog" title="yop">
			<p>
				<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> These items will be 
				permanently deleted and cannot be recovered. Are you sure?
			</p>
		</div>
 
		<button id="opener">Open Dialog</button>
 
		<div id="dialog-message" title="yop envoyé">
		    <p>
		        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span> Your files 
		        have downloaded successfully into the My Downloads folder.  
		    </p>
		    <p id="mssg">
 
		    </p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-03T21:46:57.820+01:00" pubdate>2013-03-03T21:46:57.820+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>	
		"use strict";
 
		head( function(){ // Voir : http://headjs.com/
 
			$( function(){
 
				$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
				// debug
				$.Mustache.options.warnOnMissingTemplates = true;
 
				/*
				 * Début code du test
				 */
 
				var cpt = 10,
					dec = function dec(){
						setInterval( function(){
							if ( cpt > 0 ){                      
					            $( "#mssg" ).html( "La page se fermera automatiquement dans " + cpt + " sec" );
					            cpt--;
					        } else {
					            $( "#dialog-message" ).dialog( "close" );    
					        }
					     }, 1000);
					};
 
				$( "#dialog" ).dialog({
					"autoOpen" : false,
				    "show" : {
				    	"effect" : "size",
				        "duration" : 1000
				    },
				    "resizable" : false,
				    "width" : 500,
				    "height" : 300,
				    "modal" : true,   
				    "buttons" : {
				    	"Envoyer" : function(){
 
				    		$( "#dialog-message" ).dialog({
				            	"resizable" : false,
				                "width" : 500,
				                "height" : 300,
				                "modal" : true,
				                "buttons" : {
				                	"Fermer la fênetre": function(){
				                		$( this ).dialog( "close" );
				                    }
				                }
				             });
 
				             cpt = 10;
				             dec();
 
				             $( this ).dialog( "close" );
				         },
				         "Annuler": function(){
				         	$( this ).dialog( "close" );
				         }
				    }
				});
 
				$( "#opener" ).on( "click", function(){
					$( "#dialog" ).dialog( "open" );
				});
 
				/*
				 * Fin code du test
				 */
 
				// debug
				console.log( $.Mustache.templates() );
			});
 
			$( window ).load( function(){
 
			});
 
		});		
	</script>
</body>  
</html>

**Royade** · 04/03/2013, 13h39

Merci pour ta réponse

Concernant le décompte, vous n'aurez jamais la précision d'un chronomètre.

Oui mais se que je trouve bizarre c'est qu' à la première ouverture, le decompte se fait précisément, et si je reclique sur "envoyer" sans recharger la page, ca devient moins precis..

J'ai un autre soucis, quand j'utilise une boucle avec des ID dynamiques, pour la première fenêtre j'utllise "[id^='dialog']" parcontre pour transmettre l'id a la 2eme fenêtre si jamais l'utilisateur a appuyer sur le bouton "envoyer", je ne sais pas comment faire.

le php:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
while($donnees = $red->fetch())
{
    $îd= $donnees['id_com'];   
 
    echo '<div id="dialog'. $id .'" style="font-size:15px;" title="Signaler un abus">
    <p style="font-size:13px;">Si le commentaire est déplacé, veuillez appuyer sur "envoyer" !</p>
    </div>';
 
    echo '<div style="display:none;" id="dialog-message'. $id .'" title="Signalement envoyé">
    <p> Merci de nous avoir informer</p>
    </div>';                                         
 
    <span class="signaler opener" data-dialog-opener="dialog'. $id .'" title=" Signaler un abus" >Signaler</span>
}

le js

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
$(function()
{      
    $("[id^='dialog']").dialog
    ({ 
        autoOpen: false,
        resizable: false,
        modal: true,
 
        buttons:
        {
            "Envoyer": function()
            {
                $(function()
                {
                    $( "#dialog-message").dialog
                    ({
                            resizable: false,
                            modal: true,                                       
 
                            buttons:
                            {
                                "Fermer la fênetre": function()
                                {
                                    $( this ).dialog( "close" );
                                }
                            }
            });                                
        });
 
        $( this ).dialog( "close" );
          },
          "Annuler": function()
          {
                 $( this ).dialog( "close" );
          }
    }  
      });
 
    $(".opener").click
    (
        function()
        {
            $('#' + $(this).data("dialogOpener")).dialog('open');
 
            return false;
        }
    );                     
 
});

**danielhagnoul** · 04/03/2013, 22h34

[S]

Envoyé par Royade

Oui mais se que je trouve bizarre c'est qu' à la première ouverture, le decompte se fait précisément, et si je reclique sur "envoyer" sans recharger la page, ca devient moins precis..

On doit utiliser clearInterval(), code corrigé :

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
var objInterval = null,
	dec = function dec(){
		var cpt = 10;
 
		objInterval = setInterval( function(){
			if ( cpt > 0 ){                      
	            $( "#mssg" ).html( "La page se fermera automatiquement dans " + cpt + " sec" );
	            --cpt;
	        } else {
	        	$( "#mssg" ).empty();
	            $( "#dialog-message" ).dialog( "close" );   
	        }
	     }, 1000);
	};
 
$( "#dialog" ).dialog({
	"autoOpen" : false,
    "show" : {
    	"effect" : "size",
        "duration" : 1000
    },
    "resizable" : false,
    "width" : 500,
    "height" : 300,
    "modal" : true,   
    "buttons" : {
    	"Envoyer" : function(){
 
    		$( "#dialog-message" ).dialog({
            	"resizable" : false,
                "width" : 500,
                "height" : 300,
                "modal" : true,
                "buttons" : {
                	"Fermer la fênetre": function(){
                		$( this ).dialog( "close" );
                    }
                },
                "close" : function( event, ui ){
                	clearInterval( objInterval );
                }
             });
 
             dec();
 
             $( this ).dialog( "close" );
         },
         "Annuler": function(){
         	$( this ).dialog( "close" );
         }
    }
});
 
$( "#opener" ).on( "click", function(){
	$( "#dialog" ).dialog( "open" );
});

---

Lien dynamique : http://api.jquery.com/on/.

$( parentSelector ).on( eventType, selector, function(){ ... });.

Exemple : $( "body" ).on( "click", "#dialog", function(){ ... });.

**Royade** · 05/03/2013, 19h21

On doit utiliser clearInterval(), code corrigé :

D'accord, ca marche bien sauf quand on la ferme avant que les 10 secondes soient écoulé, si on réouvre la boite de dialogue et qu'on refait "envoyé" le decompte pendant un cour instant va affiché la seconde ou on a fermé l'ancienne boite de dialogue pour reprendre ensuite a 10.
Par exemple je fais envoyer une 1ere fois; a 5 secondes je ferme la boite de dialogue, je réouvre la boite je refais envoyé, et la au lieu de commencer a 10 ca va me faire 5 10 9 8 7..

j'ai mis ca "$( "#mssg" ).html( "La page se fermera automatiquement dans" );"
au moins comme ca j'ai pas la fameuse seconde qui s'affiche avant le decompte, mais ducoup le decompte commence 1seconde apres mais c 'est pas dérangeant.

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
var objInterval = null,
dec = function dec()
{
	var cpt = 10;
	$( "#mssg" ).html( "La page se fermera automatiquement dans" );
	objInterval = setInterval( function()
	{
		if ( cpt > 0 )
		{  					
	            $( "#mssg" ).html( "La page se fermera automatiquement dans " + cpt + " sec" );
	            --cpt;
	        } 
		else 
		{
	        	$( "#mssg" ).empty();
	            $( "#dialog-message" ).dialog( "close" );   
	        }
	}, 1000);
};

$( parentSelector ).on( eventType, selector, function(){ ... });.

Exemple : $( "body" ).on( "click", "#dialog", function(){ ... });.

Merci j'ai lu mais j'ai jamais apris le js donc j 'essais de bidouiller un peu sans résultat pour l'instant!

**danielhagnoul** · 05/03/2013, 19h43

Bonsoir

Envoyé par Royade

D'accord, ca marche bien sauf quand on la ferme avant que les 10 secondes soient écoulé, si on réouvre la boite de dialogue et qu'on refait "envoyé" le decompte pendant un cour instant va affiché la seconde ou on a fermé l'ancienne boite de dialogue pour reprendre ensuite a 10.
Par exemple je fais envoyer une 1ere fois; a 5 secondes je ferme la boite de dialogue, je réouvre la boite je refais envoyé, et la au lieu de commencer a 10 ca va me faire 5 10 9 8 7..

C'est à cause d'un problème de ce genre que j'ai ajouté l'instruction $( "#mssg" ).empty(); dans la fonction dec(), il suffit de la déplacer dans la fermeture du dialogue pour qu'elle agisse à chaque fermeture.

Code modifié :

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js",
			"https://raw.github.com/janl/mustache.js/master/mustache.js",
			"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js"
		);
 
		/*
		 * "http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"
		 * 
		 * "http://code.jquery.com/jquery-migrate-1.1.0.min.js",
		 */
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST */
		#dialog, #dialog-message { display: none; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1315588/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/jquery-ui-dialog-compteur/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="dialog" title="yop">
			<p>
				<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> These items will be 
				permanently deleted and cannot be recovered. Are you sure?
			</p>
		</div>
 
		<button id="opener">Open Dialog</button>
 
		<div id="dialog-message" title="yop envoyé">
		    <p>
		        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span> Your files 
		        have downloaded successfully into the My Downloads folder.  
		    </p>
		    <p id="mssg">
 
		    </p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-03T21:46:57.820+01:00" pubdate>2013-03-03T21:46:57.820+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>	
		"use strict";
 
		head( function(){ // Voir : http://headjs.com/
 
			$( function(){
 
				$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
				// debug
				$.Mustache.options.warnOnMissingTemplates = true;
 
				/*
				 * Début code du test
				 */
 
				var objInterval = null,
					dec = function dec(){
						var cpt = 10;
 
						objInterval = setInterval( function(){
							if ( cpt > 0 ){                      
					            $( "#mssg" ).html( "La page se fermera automatiquement dans " + cpt + " sec" );
					            --cpt;
					        } else {
					            $( "#dialog-message" ).dialog( "close" );   
					        }
					     }, 1000);
					};
 
				$( "#dialog" ).dialog({
					"autoOpen" : false,
				    "show" : {
				    	"effect" : "size",
				        "duration" : 1000
				    },
				    "resizable" : false,
				    "width" : 500,
				    "height" : 300,
				    "modal" : true,   
				    "buttons" : {
				    	"Envoyer" : function(){
 
				    		$( "#dialog-message" ).dialog({
				            	"resizable" : false,
				                "width" : 500,
				                "height" : 300,
				                "modal" : true,
				                "buttons" : {
				                	"Fermer la fênetre": function(){
				                		$( this ).dialog( "close" );
				                    }
				                },
				                "close" : function( event, ui ){
				                	clearInterval( objInterval );
				                	$( "#mssg" ).empty();
				                }
				             });
 
				             dec();
 
				             $( this ).dialog( "close" );
				         },
				         "Annuler": function(){
				         	$( this ).dialog( "close" );
				         }
				    }
				});
 
				$( "#opener" ).on( "click", function(){
					$( "#dialog" ).dialog( "open" );
				});
 
				/*
				 * Fin code du test
				 */
 
				// debug
				console.log( $.Mustache.templates() );
			});
 
			$( window ).load( function(){
 
			});
 
		});		
	</script>
</body>  
</html>

**Royade** · 05/03/2013, 20h12

autant pour moi, en effet ca marche à la perfection

pour mon problème d'ouverture de la 2eme boite de dialogue lors de l'appui sur "envoyer" mais dans une boucle j'ai pas moyen de le mettre appart

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
$("[id^='dialog-message']").dialog
({	
	autoOpen: false,
	show:
	{
		effect: "show",
		duration: 1000
	},
	resizable: false,
	height:161,
	modal: true,
	buttons: 
	{
		"Fermer la fênetre": function() 
		{
			$( this ).dialog( "close" );
		}
	}
	setTimeout("$( this ).dialog('close')",8000);
	$( this ).dialog( "close" );
});

mais apres c 'est tjrs la même chose pour l'appeler

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
$(function() 
{		
	$("[id^='dialog']").dialog
	({	
		autoOpen: false,
		show:
		{
			effect: "show",
			duration: 1000
		},
 
		resizable: false,
		height:161,
		modal: true,	
 
		buttons: 
		{						
			"Envoyer": function() 
			{		
				//	?			
			},
			"Annuler": function() 
			{
				$( this ).dialog( "close" );
			}	 
		}	
	});
 
	$("[id^='dialog-message']").dialog
	({	
		autoOpen: false,
		show:
		{
			effect: "show",
			duration: 1000
		},
 
		resizable: false,
		height:161,
		modal: true,
 
		buttons: 
		{
			"Fermer la fênetre": function() 
			{
				$( this ).dialog( "close" );
			}
		}
 
		setTimeout("$( this ).dialog('close')",8000);
		$( this ).dialog( "close" );
 
	});
 
	$(".opener").click
	(
		function()
		{
			$('#' + $(this).data("dialogOpener")).dialog('open');
 
			return false;
		}
	);    					
 
});

**danielhagnoul** · 06/03/2013, 00h19

Bonsoir

Nota bene : je vous rappelle que les personnes qui acceptent de répondre à vos questions sont des bénévoles qui prennent sur leur temps libre et qui n'ont aucune obligation de le faire. Il est donc, non seulement inutile, mais mal vu d'envoyer un MP de rappel. En conséquence, je décide que cette réponse sera ma dernière réponse à votre problème.

------------------------------------------------------------------

J'essaye de comprendre votre histoire d'ID dynamique, je crois comprendre qu'il y a plusieurs paires de dialogues avec des ID différents ? Vous aimez la simplicité !

Et pour le bouton d'ouverture (actuellement d'ID "opener"), il faudra un bouton pour chaque paire ?

Je préfère une autre solution, plus légère et plus jolie : on garde une seule paire de dialogues et un seul bouton d'ouverture, mais on change le texte des dialogues en fonction du contexte.

Un 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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js",
			"https://raw.github.com/janl/mustache.js/master/mustache.js",
			"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js"
		);
 
		/*
		 * "http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"
		 * 
		 * "http://code.jquery.com/jquery-migrate-1.1.0.min.js",
		 */
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST */
		#dialog, #dialog-message { display: none; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1315588/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/jquery-ui-dialog-compteur/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="dialog" title="yop">
			<p>
				<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> 
			</p>
		</div>
 
		<select id="langue">
			<option value="en" selected>en</option>
			<option value="it">it</option>
			<option value="fr">fr</option>
			<option value="de">de</option>
			<option value="nl">nl</option>
			<option value="it">it</option>
		</select>
 
		<button id="opener">Open Dialog</button>
 
		<div id="dialog-message" title="yop envoyé">
		    <p>
		        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span> 
		    </p>
		    <p id="mssg">
 
		    </p>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-03T21:46:57.820+01:00" pubdate>2013-03-03T21:46:57.820+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>	
		"use strict";
 
		head( function(){ // Voir : http://headjs.com/
 
			$( function(){
 
				$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
				// debug
				$.Mustache.options.warnOnMissingTemplates = true;
 
				/*
				 * Début code du test
				 */
 
				var language = "it",
					ObjLangues = null,
					objInterval = null,
					dec = function dec(){
						var cpt = 10,
							str = "";
 
						objInterval = setInterval( function(){
							if ( cpt > 0 ){
 
								switch ( language ){
									case "fr" :
										str = ObjLangues[ "fr" ][ "fermeture" ].replace( "5", cpt );
										break;
									case "de" :
										str = ObjLangues[ "de" ][ "fermeture" ].replace( "5", cpt );
										break;
									case "it" :
										str = ObjLangues[ "it" ][ "fermeture" ].replace( "5", cpt );
										break;
									case "nl" :
										str = ObjLangues[ "nl" ][ "fermeture" ].replace( "5", cpt );
										break;
									default : // "en"
										str = ObjLangues[ "en" ][ "fermeture" ].replace( "5", cpt );
								}
 
								$( "#mssg" ).html( str );
					            --cpt;
					        } else {
					            $( "#dialog-message" ).dialog( "close" );   
					        }
					     }, 1000);
					},
					jqXHR = $.getJSON( "dialoguemultiple.json" );
 
				jqXHR.done( function( data, textStatus, jqXHR ){
					// succès de la transaction, on doit traiter le contenu de data
 
					// debug
					console.log( data, textStatus, jqXHR );
 
					ObjLangues = data;
 
					console.log( ObjLangues[ "fr" ][ "fermeture" ].replace( " 5 ", " " + textStatus + " " ) );
 
					$( "#dialog" ).dialog({
						"autoOpen" : false,
					    "show" : {
					    	"effect" : "size",
					        "duration" : 1000
					    },
					    "resizable" : false,
					    "width" : 500,
					    "height" : 300,
					    "modal" : true,   
					    "buttons" : {
					    	"Envoyer" : function(){
 
					    		$( "#dialog-message" ).dialog({
					            	"resizable" : false,
					                "width" : 500,
					                "height" : 300,
					                "modal" : true,
					                "buttons" : {
					                	"Fermer la fênetre": function(){
					                		$( this ).dialog( "close" );
					                    }
					                },
					                "close" : function( event, ui ){
					                	clearInterval( objInterval );
 
					                	$( "#mssg" ).empty();
 
								$( "span.ajout" ).remove();
					                }
					             });
 
					             dec();
 
					             $( this ).dialog( "close" );
					         },
					         "Annuler": function(){
					         	$( this ).dialog( "close" );
					         }
					    }
					});
 
					$( "#opener" ).on( "click", function(){
						var jObjStr1 = $( '<span class="ajout"></span>' ),
							jObjStr2 = $( '<span class="ajout"></span>' );
 
						language = $( "#langue" ).val();
 
						switch ( language ){
							case "fr" :
								jObjStr1.append( ObjLangues[ "fr" ][ "premier" ] );
								jObjStr2.append( ObjLangues[ "fr" ][ "second" ] );
								break;
							case "de" :
								jObjStr1.append( ObjLangues[ "de" ][ "premier" ] );
								jObjStr2.append( ObjLangues[ "de" ][ "second" ] );
								break;
							case "it" :
								jObjStr1.append( ObjLangues[ "it" ][ "premier" ] );
								jObjStr2.append( ObjLangues[ "it" ][ "second" ] );
								break;
							case "nl" :
								jObjStr1.append( ObjLangues[ "nl" ][ "premier" ] );
								jObjStr2.append( ObjLangues[ "nl" ][ "second" ] );
								break;
							default : // "en"
								jObjStr1.append( ObjLangues[ "en" ][ "premier" ] );
								jObjStr2.append( ObjLangues[ "en" ][ "second" ] );
						}
 
						$( "#dialog-message > p:first" )
							.append( jObjStr2 );
 
						$( "#dialog" )
							.children( "p:first" )
							.append( jObjStr1 )
							.end()
							.dialog( "open" );
 
					});
 
				});
 
				jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
					// échec de la transaction, gérer la catastrophe
 
					// debug
					console.log( jqXHR, textStatus, errorThrown );
				});
 
				/*
				 * Fin code du test
				 */
 
				// debug
				console.log( $.Mustache.templates() );
			});
 
			$( window ).load( function(){
 
			});
 
		});		
	</script>
</body>  
</html>

Le fichier JSON :

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
{
	"en" : {
		"premier" : " These items will be permanently deleted and cannot be recovered. Are you sure?",
		"second" : " Your files have downloaded successfully into the 'My Downloads folder'.",
		"fermeture" : "The page will automatically close in 5 seconds."
	},
	"fr" : {
		"premier" : " Ces éléments seront définitivement supprimés et ne peuvent pas être récupérés. Êtes-vous sûr*?",
		"second" : " Vos fichiers sont téléchargés avec succès dans le dossier 'Mes téléchargements'.",
		"fermeture" : "La page se fermera automatiquement dans 5 secondes."
	},
	"it" : {
		"premier" : " Questi prodotti verranno eliminati in modo permanente e non può essere recuperato. Sei sicuro?",
		"second" : " I tuoi file sono stati caricati con successo nella cartella 'I miei download'.",
		"fermeture" : "La pagina si chiuderà automaticamente in 5 secondi."
	},
	"de" : {
		"premier" : " Diese Elemente werden dauerhaft gelöscht werden und nicht wiederhergestellt werden können. Sind Sie sicher?",
		"second" : " Ihre Dateien erfolgreich in den Ordner 'Meine Downloads hochgeladen'.",
		"fermeture" : "Die Seite wird automatisch in 5 Sekunden zu schließen."
	},
	"nl" : {
		"premier" : " Deze items zullen permanent verwijderd en kunnen niet worden teruggehaald. Weet u het zeker ?",
		"second" : "Uw bestanden worden geüpload naar de map 'Mijn downloads'.",
		"fermeture" : "De pagina wordt automatisch gesloten in 5 seconden."
	}
}

jQuery UI Dialog et compteur

jQuery

Discussions similaires

Partager

Partager