Fin des animations avant .submit()

Bonjour,

Comment gérer la fonction .submit() de façon à ce que toutes les animations se terminent avant le changement de page ?

J'ai essayé plusieurs méthodes :
- Appel par callback
- Fonction JavaScript pure
- Retour true
- Appel d'une fonction qui retourne true en callback
- ...

Rien n'y fait, dès que toutes les conditions sont remplies pour passer à la page suivante (en gros quand tous les champs sont remplis) ; il ne cherche pas à savoir où en est jQuery dans ses animations et il submit ! :(

Bonsoir

J'ai bien aimé chercher et trouver une réponse à cette question, mais je doute de son utilité.

Si l'utilisateur décide qu'il est temps de soumettre un formulaire, on doit s'exécuter tout de suite, sa réaction devant un délai plus ou moins conséquent ne pourra être que l'agacement.

Pour tester ma proposition, il suffit de copier-coller ma page de test.

Quelques explications (voir aussi les commentaires dans le code).

La section ayant la classe conteneur subi une animation de la couleur de fond avec des délais aléatoires (reprise du code créé pour une question précédente) qui commence 2s à 5s après l'ouverture de la page et qui se termine 20s après l'ouverture de la page.

Le formulaire ouvre la page web "http://www.google.com/". Il est appelé par un trigger( "click" ) 10s après l'ouverture de la page. Le code de $( "form" ).on( "submit", function( event ){ ... )); fait le travail demandé.

Code:

1
2
3
$.when( deferSubmit( jObjAnim ) ).done( function(){
    setTimeout( $.proxy( $.fn.submit, jObjForm ), delay ); // delay : on peut encore imposer un délai supplémentaire avant l'exécution du submit.
});

On crée un objet différé dans la méthode deferSubmit(), lorsque la queue d'animation "fx" de l'objet jObjAnim est vide la promesse est tenue et on exécute la méthode done().

:faq: Comment puis-je utiliser l'objet jQuery.Deferred ?

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
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
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<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>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.1.0-beta1.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
/*
 * Usage :
 *
 * var seed = "jh56ki23";
 * var random = new Alea(seed);
 * var x = random(); // [0, 1[
 *
 * seed doit être aléatoire et différent
 * pour chaque initialisation de l'objet Alea.
 *
 * Pour un usage non critique, animation, on peut
 * se contenter de l'initialisation par défaut :
 *
 * var random = new Alea();
 */
 
// From http://baagoe.com/en/RandomMusings/javascript/
// Johannes BaagÃ¸e <baagoe@baagoe.com>, 2010
function Mash() {
  var n = 0xefc8249d;
 
  var mash = function(data) {
    data = data.toString();
 
    for (var i = 0; i < data.length; i++) {
      n += data.charCodeAt(i);
      var h = 0.02519603282416938 * n;
      n = h >>> 0;
      h -= n;
      h *= n;
      n = h >>> 0;
      h -= n;
      n += h * 0x100000000; // 2^32
    }
 
    return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
  };
 
  mash.version = 'Mash 0.9';
 
  return mash;
}
 
// From http://baagoe.com/en/RandomMusings/javascript/
// Johannes BaagÃ¸e <baagoe@baagoe.com>, 2010
function Alea() {
  return (function(args) {
    var s0 = 0;
    var s1 = 0;
    var s2 = 0;
    var c = 1;
 
    if (args.length == 0) {
      args = [+new Date];
    }
 
    var mash = Mash();
 
    s0 = mash(' ');
    s1 = mash(' ');
    s2 = mash(' ');
 
    for (var i = 0; i < args.length; i++) {
      s0 -= mash(args[i]);
      if (s0 < 0) {
        s0 += 1;
      }
      s1 -= mash(args[i]);
      if (s1 < 0) {
        s1 += 1;
      }
      s2 -= mash(args[i]);
      if (s2 < 0) {
        s2 += 1;
      }
    }
 
    mash = null;
 
    var random = function() {
      var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
      s0 = s1;
      s1 = s2;
 
      return s2 = t - (c = t | 0);
    };
 
    random.uint32 = function() {
      return random() * 0x100000000; // 2^32
    };
 
    random.fract53 = function() {
      return random() + (random() * 0x200000 | 0) * 1.1102230246251565e-16; // 2^-53
    };
 
    random.version = 'Alea 0.9';
    random.args = args;
 
    return random;
 
  } (Array.prototype.slice.call(arguments)));
};
 
$( function(){
 
	/*
	 * Création d'un objet différé.
	 * La promesse est tenue lorsque
	 * la queue d'animation de jObjAnim
	 * est vide.
	 */
	function deferSubmit( jObjAnim ){
		var dfd = new jQuery.Deferred(),
			ObjInterval = setInterval( function(){
				if ( jObjAnim.queue( "fx" ).length === 0 ){
					clearInterval( ObjInterval );
					dfd.resolve();
				}
			}, 500 );
 
		return dfd.promise();
	}
 
	/*
	 * Traitement de la soumission du formulaire.
	 */
	$( "form" ).on( "submit", function( event ){
		/*
		 * jObjAnim : l'objet jQuery contenant l'élément
		 * du DOM qui subit une animation.
		 */
		var jObjAnim = $( "section.conteneur" ),
			jObjForm = $( this ),
			delay = 500; // par défaut 50
 
		/*
		 * Cacher le bouton de soumission
		 */
		$( "#btnSubmit" ).css( "display", "none" );
 
		/*
		 * Suppression de l'événement.
		 */
		jObjForm.off( "submit" );
 
 
		/*
		 * Si la promesse est tenue on exécute le
		 * code de la méthode done.
		 */
		$.when( deferSubmit( jObjAnim ) ).done( function(){
 
			/*
			 * Création d'une nouvelle soumission du formulaire.
			 * Avec la possibilité de donner un délai avant l'exécution.
			 */
			setTimeout( $.proxy( $.fn.submit, jObjForm ), delay );
		});
 
	    return false; // bloquer la soumission originale
	});
 
	setTimeout( function(){
 
		/*
		 * On demande la soumission du formulaire.
		 */
		$( "#btnSubmit" ).trigger( "click" );
 
	}, 10000 ); 
 
});
 
$( window ).load( function(){
 
    var random = new Alea();
 
    // retourne X tel que : min <= X <= max
    function intRandom( min, max ){
        return Math.floor( random() * ( max - min + 1 ) + min );
    }
 
	/*
	 * Animation de la couleur de fond avec 
	 * des délais aléatoires.
	 */
	var ObjInterval = setInterval( function(){
		$( "section.conteneur" ).finish().animate({ "background-color" : "#abcdef" }, intRandom( 500, 2000 ), function(){
			$( this ).animate({ "background-color" : "#a11cdf" }, intRandom( 500, 2000 ), function(){
				$( this ).animate({ "background-color" : "@ffffff" }, intRandom( 500, 2000 ) );
			});
		});
	}, intRandom( 2000, 5000 ) );
 
	setTimeout( function(){
		clearInterval( ObjInterval );
	}, 20000 );
});
 
		});
	</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.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<form action="http://www.google.com">
	<input type="color" />
	<input type="submit" id="btnSubmit" value="Go" />
</form>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-27T22:43:28.547+02:00" pubdate>2013-09-27T22:43:28.547+02: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>
</body>
</html>

Bonjour danielhagnoul,

Je teste ça au plus vite et vous réponds par la suite pour voir si cela correspond à mes attentes.

Merci de ce travail ! :ccool:

Salut,

Alors j'ai pris le temps de dépiauter ce code ; un peu complexe pour moi je n'ai pas encore toutes les connaissances... :roll:

Cependant, en utilisant la méthode .submit() le code complet ne fonctionne plus du tout.

Je m'explique :

Quand l'utilisateur rentre ses identifiants et clique sur le bouton submit, cela le connecte s'il a bien rentré les bonnes informations, cependant si les champs sont vides ou ne correspondent pas à ce qui est demandé, le jQuery affiche un message d'erreur (formulaire basique).
A la base, j'utilisais un <input type="button" ... /> plutôt qu'un <input type="submit" ... /> afin que les animations se terminent correctement. Sauf qu'en procédant de la sorte, je ne je pouvais pas créer de variable $_POST puisque le formulaire n'était pas envoyé.

J'ai donc utilisé un bouton normal avec la méthode .submit() lorsque toutes les animations sont terminées et que bien sûr toutes les conditions sont remplies (champs non vides). Cependant, avec cette méthode le formulaire est envoyé au serveur même si les champs sont vides...

A vrai dire je ne sais plus trop comment procéder :/

Lien

J'ai trouvé le soucis !

Je n'avais pas changé mon input submiten input button ! :ccool: