Jquery UI Tabs et Ajax Validation

Version imprimable

Bonjour

J'essaie d'ajouter une validation ajax avant le changement d'un onglet:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
        $("#tabs").tabs( {
                select : function(event, ui) {
                        $("#loadingDiv").show();
                        $.ajax( {
                                async : false,
                                url : "/creatures/Creatures/ajax_validate",
                                type : "POST",
                                processData : true,
                                dataType : "json",
                                data : $("#CreatureEditForm").serializeArray(),
                                success : afterValidate
                        });
                }
        });

select : function doit renvoyer true of false pour autoriser ou non la sélection de l'onglet.
Mais j'obtiens le résultat de ma validation dans la fonction afterValidate.

J'ai trouvé une solution de bidouilleur : ajouter un champ input caché. Je met une valeur par défaut avant la validation. Dans la fonction afterValidate, je change la valeur s'il y a des erreurs.

Je pense qu'il doit y avoir un moyen plus simple et plus propre surtout.

A tout hasard, voici le code de ma fonction afterValidate:

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
        function afterValidate(data, status) {
                if (data.errors) {
                        $("div.error-message").attr("title", "error");
                        $.each(data.errors.data, function(model, errors) {
                                for (fieldName in this) {
                                        var inputID = camelize(model + "_" + fieldName);
                                        var element = $("#" + inputID);
                                        var elementError = $("#" + inputID + "_error");
                                        if (elementError.length > 0) {
                                                elementError.text(this[fieldName]);
                                                elementError.effect("shake", {
                                                        times : 2,
                                                        distance : 10
                                                }, 150);
                                                elementError.removeAttr("title");
                                        } else {
                                                var _insert = $(document.createElement("div"))
                                                                .addClass("error-message");
                                                _insert.attr("id", inputID + "_error");
                                                _insert.text(this[fieldName]).hide().insertAfter(
                                                                element);
                                                _insert.slideDown(200);
                                        }
                                }
                        });
                        $("div.error-message[title=error]").slideUp(200, function() {
                                $(this).remove();
                        });
                } else
                        $(".error-message").hide();
                $("#loadingDiv").hide();
        }

alors, je te conseille de passer par une closure qui elle, peut avoir un acces aux variables locales (cf : "returnBool ") :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        $("#tabs").tabs( {
                select : function(event, ui) {
                var returnBool = true;                        
                $("#loadingDiv").show();
                        $.ajax( {
                                async : false,
                                url : "/creatures/Creatures/ajax_validate",
                                type : "POST",
                                processData : true,
                                dataType : "json",
                                data : $("#CreatureEditForm").serializeArray(),
                                success : function() {
                                    //dans une closure tu peut modifier la valeur de returnBool 
                                    returnBool = false;
                                }
                        });
                }
                return returnBool;
        });

Merci, je ne connaissais pas les closures et ça marche très bien!

Seul inconvénient : je dois mettre le code de ma fonction success directement dans l'appel ajax.
Mais au final, mon code est compressé par jsmin, donc pas de problème :-)

Je mets ici le code final pour les éventuels intéressés:

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
	$("<tabsId>").tabs( {
		select : function(event, ui) {
			$("#loadingDiv").show();
			var valid = true;
			$.ajax( {
				async : false,
				url : "<validateUrl>",
				type : "POST",
				processData : true,
				dataType : "json",
				data : $("<FormId>").serializeArray(),
				success : function(data) {
					if (data.errors) {
						valid = false;
						$("div.error-message").attr("title", "error");
						$.each(data.errors.data, function(model, errors) {
							for (fieldName in this) {
								var inputID = camelize(model + "_" + fieldName);
								var element = $("#" + inputID);
								var elementError = $("#" + inputID + "_error");
								if (elementError.length > 0) {
									elementError.text(this[fieldName]);
									elementError.effect("shake", {
										times : 2,
										distance : 10
									}, 150);
									elementError.removeAttr("title");
								} else {
									var _insert = $(document.createElement("div"))
											.addClass("error-message");
									_insert.attr("id", inputID + "_error");
									_insert.text(this[fieldName]).hide().insertAfter(
											element);
									_insert.slideDown(200);
								}
							}
						});
						$("div.error-message[title=error]").slideUp(200, function() {
							$(this).remove();
						});
					} else
						$(".error-message").hide();
					$("#loadingDiv").hide();
				}
			});
			return valid;
		}
	});