Stopper le submit au retour d'un appel ajax [Résolu]

nawbacan · 09/03/2011, 10h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
 
$("#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;
  }
  });

erox44 · 09/03/2011, 17h02

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.

ABCIWEB · 09/03/2011, 17h48

Tu pourrais aussi faire une requête synchrone plutôt qu'asynchrone (qui est le comportement par défaut).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

x-zolezzi · 11/03/2011, 09h59

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....

danielhagnoul · 11/03/2011, 11h00

Bonjour

Exemple de transactions AJAX :

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
<!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>

nawbacan · 14/03/2011, 09h50

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..

ABCIWEB · 14/03/2011, 17h05

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

nawbacan · 15/03/2011, 09h43

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.

09/03/2011, 17h02	#2
erox44 Membre habitué Développeur Web Inscription : avril 2007 Messages : 323 Détails du profil Informations personnelles : Sexe : Âge : 23 Localisation : France, Loire Atlantique (Pays de la Loire) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : avril 2007 Messages : 323 Points : 144 Points : 144	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. __________________ L'intelligence c'est comme la confiture, moins tu en as , plus tu l'étales...
	00

14/03/2011, 17h05	#7
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 239 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 239 Points : 1 561 Points : 1 561	Et mon post ne t'as pas donné un peu d'explication ? __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

11/03/2011, 09h59	#4
x-zolezzi Membre confirmé Xavier ZOLEZZI Étudiant Inscription : juin 2008 Messages : 135 Détails du profil Informations personnelles : Nom : Xavier ZOLEZZI Âge : 23 Localisation : France Informations professionnelles : Activité : Étudiant Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 135 Points : 224 Points : 224	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....
	00

14/03/2011, 09h50	#6
nawbacan Membre du Club Inscription : avril 2002 Messages : 77 Détails du profil Informations forums : Inscription : avril 2002 Messages : 77 Points : 42 Points : 42	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..
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email