Les promesses avec $.when().done()

Version imprimable

Bonjour,

Pour valider mes formulaires je viens de découvrir les promesses (la version jquery)

Lorsque je clique sur mon bouton submit, je check les contrôles de mes champs obligatoires et si les tests sont bons, je lance le callback du submit.

Grosso modo cette partie ressemble à ça :
Code:

1 2 3 4 5 6 7 8 9 10 $.when( doValidate('montant', callbackUrl, formid), doValidate('numero', callbackUrl, formid) ).done(function () { var postdata = form.serialize(); $.post(callbackUrl, postdata , function (response) { $('#' + ajaxContainer).empty(); $('#' + ajaxContainer).html(response); }); });
les fonctions doValidate() sont asynchrones, checkent que le champ est valide (affichent une erreur si ce n'est pas le cas) et retournent l'objet post

Jusque là, ça fonctionne bien. Je suis en train de généraliser mes contrôles de formulaire. Les champs obligatoires tel que 'montant' et 'numero' sont maintenant stockés dans un tableau. Cette partie doit donc maintenant les récupérer dans ce tableau (c'est intuitivement la première approche que j'ai. Mais je pense qu'elle n'est pas adaptée).

Et là je suis un peu paumé.
doValidate('montant', callbackUrl, formid) exécute la fonction et c'est le résultat de cette exécution (asynchrone) qui est passé à when().
ça me parait complétement impossible en passant par un array ou une fonction qui fait l'appel et fait des retour de ces appels de manière asynchrone en dehors de sa portée (Je ne suis pas dev javascript, il y a donc beaucoup de choses qui sont un peu obscures pour moi actuellement).

Quelqu'un aurait t'il des précisions ou une approche me permettant de réaliser cette partie?

Peu importe le type des paramètres de la fonction, cela doit fonctionner. Exemple :

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
$( function(){
 
	var tab = [
			[ "<", 4, 8 ],
			[ ">", 4, 3 ]
		],
		doValidate = function doValidate( sujet, n, limite ){
		    var objDif = $.Deferred();
 
		    if ( eval( n + sujet + limite ) ){
		        objDif.resolve( "doValidate", arguments);
		    } else {
		        objDif.reject( "doValidate", arguments);
		    }
 
		    return objDif.promise();
		};
 
	$.when( doValidate( tab[0][0], tab[0][1], tab[0][2] ), doValidate( tab[1][0], tab[1][1], tab[1][2] ) )
	   .done( function(){
	       console.log( "succès", arguments)
	   })
	   .fail( function(){
	       console.log( "échec", arguments)
	   });
 
});

Bonjour,

Merci beaucoup pour la réponse ça m'a beaucoup aidé. Un détail que j'ai oublié de préciser : "montant" et "numero" sont des id d'elements html.

Voilà ce que je souhaitais faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var elements = [ "montant", "numero" ], elToCheck = function(arr){ arr = arr || elements; var result = []; for(var i=0;i<arr.length;i++){ result.push(doValidate(arr[i], callbackUrl, formid)); } return result; } $.when( elToCheck() ).done(function () { var postdata = form.serialize(); $.post(callbackUrl, postdata , function (response) { $('#' + ajaxContainer).empty(); $('#' + ajaxContainer).html(response); }); });
J'ai fait un test, cela fonctionne. Pas mal de petites choses me perturbait :

$.when() prend arguments comme paramètre. Je pensais qu'arguments n'était pas un array. Il semblerait que si (je pensais que c'était un objet particulier qu'on manipulait comme un array).

Le retour d'une fonction comme paramètre d'une autre me paumait un peu.
Exemple $.when(elToCheck()). Ou encore result.push(doValidate(arr[i], callbackUrl, formid))

Pour result.push(doValidate(arr[i], callbackUrl, formid)) ce que je ne comprends toujours pas c'est que : doValidate() étant asynchrone, il peut ajouter un élément à mon tableau n'importe quand.

Du coup, Javascript a un mécanisme me garantissant que result sera dans l'état que je souhaite au moment du return ?
Ou ma boucle for ne passe t'elle à l’élément suivant que lorsque l'affectation a été résolue ?

J'ai fait des tests, il semblerai que ça marche. Mais je suis perplexe dès qu'il y a des comportements asynchrones.

17/07/2013, 11h19
danielhagnoul
Bonjour
1. L'asynchrone c'est le point fort du langage JS.
2. La méthode html() remplace l'ancien contenu par le nouveau, il est donc inutile d'utiliser empty().
3. $.when() : http://api.jquery.com/jQuery.when/
  
  Citation:
  
  If a single argument is passed to jQuery.when and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately.
  
  $.when() est utile pour gérer le résultat final d'un ensemble d'objets différés.
  
  L'utilisation de $.when() n'a pas de sens dans votre code, le résultat sera toujours "done" et jamais "fail"
  
  Voir mon exemple ci-dessus et la :faq: http://javascript.developpez.com/faq...#ObjetDeferred
19/07/2013, 09h58
herotic

Bonjour,

.when() et son fonctionnement ne me pose pas de problème (à savoir ses buts).

Mon problème, reformulé, est le suivant : comment transmettre un nombre variables d'objets différés à when() ? Éventuellement à travers un tableau.

J'ai trouvé la réponse sur Stackoverflow :
http://stackoverflow.com/questions/5...erreds-to-when

Merci en tout cas, ça m'a permis de mieux cerner mon pb.