Stopper le submit au retour d'un appel ajax

Version imprimable

hello,

je ne sais pas si je suis pile poil dans la bonne section. Mes excuses si ceci n'était pas le cas.

J'ai une formulaire dont l'envoi est déclanché par un bouton :
code jquery :
Code:

1 2 3 4 $("#boutonsubmite").click(function (){ $("#coursedateForm").submit(); });
lors du submit je check à l'aide d'un script php si les datas soumises sont correctes. Ceci se fait par l'intermédiaire d'un appel Ajax.
Je dois bloquer la soumission du formulaire si le retour de l'appel ajax n'est pas une chaine de caractères vise.
Un return false fonctionne en jquery, mais il ne fonctionne pas en ajax. J'ai donc trouvé la directive e.preventDefault(); qui me permet de stopper le submit en cas de besoin. mais ca marche que sous firefox et pas sous chrome. Voyez-vous une autre solution ?
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 $("#coursedateForm").submit(function(e) { var dataStr = $("#coursedateForm").serialize(); var res=' '; $.ajax({ type: "POST", url: "checkDataCourseDate.php", data: dataStr, dataType: "json", success:function(response){ $("#error_formular").text(' '); for (key in response) { res= key; $("#error_formular").append("<br />"+key+" : "+response[key]); } if (res!= ' '){ $("#error_formular").slideUp("fast"); $("#error_formular").slideDown("fast"); e.preventDefault(); return false; } else { return true; } } }); if (res==' '){ return true; } else { e.preventDefault(); return false; } });

09/03/2011, 17h02
erox44

Hello,
ce que tu peux faire c'est, laisser l'event .click() sur ton bouton, et dans la fonction, tu fais ton appel ajax et en fonction du résultat recu , tu fais un .submit() ou non.
09/03/2011, 17h48
ABCIWEB
Tu pourrais aussi faire une requête synchrone plutôt qu'asynchrone (qui est le comportement par défaut).
Code:

1 2 3 4 5 6 $.ajax({ type: "POST", url: "checkDataCourseDate.php", data: dataStr, dataType: "json", async: false,
Dans ce cas le navigateur attendra la réponse avant d'entreprendre toute autre action.
11/03/2011, 09h59
x-zolezzi

Juste une idée, non testée, mais si tu bind l'événement submit de ton formulaire, sur le success de ton ajax, un return false, peut être que ça peut marcher....a voir....

Bonjour

Exemple de transactions AJAX :

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<form id="coursedateForm">
	<input type="text" name="mot" value="Un mot pour remplir"/>
	<input type="submit" value="go"/>
</form>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script>
		$(function(){
 
$("#coursedateForm").submit(function(){
	var boolOK = false,
		myData = $(this).serialize();
 
	console.log(myData);
 
	$.getJSON("test3.json", myData, function(data, textStatus, jqXHR){
		console.log(data, textStatus, jqXHR);
 
		// succès de la transaction, on doit traiter le contenu de data
		$(".conteneur").append("<section>" + data[0].Nom + "</section>");
 
		$.post("qr6.php", myData, function(data, textStatus, jqXHR){
			console.log(data, textStatus, jqXHR);
 
			// succès de la transaction, on doit traiter le contenu de data
			$(".conteneur").append("<section>" + data + "</section>");
 
		}, "text").error(function(jqXHR, textStatus, errorThrown){
			console.log(jqXHR, textStatus, errorThrown);
 
			// échec de la transaction, gérer la catastrophe
 
		}).complete(function(jqXHR, textStatus){
			console.log(jqXHR, textStatus);
 
			// la transaction s'est terminée par un succès ou par un échec
		});
 
	}).error(function(jqXHR, textStatus, errorThrown){
		console.log(jqXHR, textStatus, errorThrown);
 
		// échec de la transaction, gérer la catastrophe
 
	}).complete(function(jqXHR, textStatus){
		console.log(jqXHR, textStatus);
 
		// la transaction s'est terminée par un succès ou par un échec
	});
 
	return boolOK;
});
 
		});
	</script>
</body>  
</html>

14/03/2011, 09h50
nawbacan

hello à tous,

merci pour vos réponses. J'ai essayé la méthode Daniel avec le
$.getJSON. ça roule à un 2 détail près.

lorsque je retourne ma condition de réussite boolOK, celle-ci n'est jamais mise à true.

en fait l'exécutions du code dans le $.getJSON est effectuée après le return. Je comprend pas très bien pourquoi..
14/03/2011, 17h05
ABCIWEB

Et mon post ne t'as pas donné un peu d'explication ?
15/03/2011, 09h43
nawbacan

Citation:

Envoyé par ABCIWEB

Et mon post ne t'as pas donné un peu d'explication ?

hello,
je suis stress ces jours-ci et le manque de concentration passe parfois par là.
J'ai pu résoudre mon problème avec un appel de type ajax asynchrone.