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>

jQuery UI Dialog et compteur

jQuery

Vue hybride

Discussions similaires

Partager

Partager