latence requete ajax pour validation [Résolu]

[viny]

Bonjour,

Je me permets de vous soumettre un problème que je rencontre lors de la validation de mon formulaire.

Celui-ci est composé entre autre d'un champ Pseudo, d'un champ Email, d'un champ Genre et d'un champ Age.

Avant l'enregistrement des données dans la base je vérifie que tous les champs sont bien remplis et au bon format.

Mais pour les champs email et pseudo je fais une requête ajax pour vérifier l'unicité du pseudo et de l'adresse email en base avant enregistrement.

Par défaut tous mes flags : mail_valide, pseudo_valide, genre_valide etc sont à FALSE.

Quand je clique sur le bouton d'enregistrement du formulaire, le script verifie tous les champs et met mes flags à true si tout est ok.

Seulement le problème avec les requêtes ajax sur mes champs email et pseudo de vérification d'unicité prennent un certain temps avant d'avoir une réponse, si bien que mes flags ne sont pas mis à true avant que le script de vérification se termine.

Je n'obtiens par conséquent jamais une validation totale de mes données pour permettre l'enregistrement en base.

J'espère être assez clair et que vous pourrez m'apporter une solution.

Bien cordialement

[Kymils]

Bonsoir,

A ce que je comprends, il suffit de rendre ton appel ajax synchrone non ?

[viny]

Bonjour,

Oui mais l'ajax synchrone c'est un peu dangereux non ? si le navigateur se bloque c'est un problème...

[Kymils]

Je propose ça en première approche, ça me permet de vérifier que j'ai bien compris le problème et pour toi d'être certain que c'est bien ton seul problème. Comme cette vérif ne coute rien, autant la faire, non ?

[viny]

Oui c'est mon problème...mais j'essaie de trouver une solution alternative qui serait dans un premier temps de faire une vérification des formats des champs et si tout est OK sérialiser les données et les envoyer au serveur qui fera le controle des unicités sur les champs mail et pseudo et de retourner les éventuelles erreurs. Ce qui me permet de rester en asynchrone...

[Bovino]

Tu pourrais nous montrer un peu de code ? Parce que sinon, on nage un peu dans le vide...

[viny]

Oui bien entendu alors voici le code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
$.post("inscription.php",{ 'input_inscrit_email':$('#form_input_email').val(), 'verif_unicite_email':'OK'} ,function(data)
				{
					if(data=='email_present') 
					{
					    verif_unicite_email ="KO";
 
					}
					else if(data=='email_unique')
					{
						verif_unicite_email ="OK";						
					}
				});

Voilà mais comme c'est de l'asynchrone mes variables ne sont pas mises à jour à temps...J'ai entendu parler de callback mais je ne sais pas vraiment ce que c'est et si c'est très bien adapté à mon cas...

[viny]

Voilà j'ai adapté une solution de callback et ça fonctionne :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
appelVerifUniciteEmail();
 
function verifUniciteEmail(callback)
{
	$.post("ajax/inscription.php",{ 'form_input_email':$('#form_input_email').val(), 'controle_unicite_email':'OK'} ,function(data)
	{
		unicite_email=data;
		callback(unicite_email);
	});
 
}
 
function appelVerifUniciteEmail()
{
 	verifUniciteEmail(function(unicite_email){
		if(unicite_email=="email_present"){alert("email deja en base");}
		if(unicite_email=="email_unique"){alert("email non en base");
	});
 
}

Mais ce que j'aimerais c'est que la fonction appelVerifUniciteEmail() me retourne la valeur de unicite_email.

Pour avoir cela :

Code :

1
2
3
 
var verif_email = appelVerifUniciteEmail();
if( verif_email =="email_present"){/* code*/}

Des pistes ?

Cordialement

[danielhagnoul]

Bonsoir

Concernant votre version du code, je vous suggère de tester cette version corrigée (un ) ou } ou }) absent, je ne rappelle plus) :

Code javascript :

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
function verifUniciteEmail(callback){
	$.post("ajax/inscription.php",{
		'form_input_email': $('#form_input_email').val(),
		'controle_unicite_email': 'OK'
	}, function(data){
		unicite_email=data;
		callback(unicite_email);
	});
}
 
function appelVerifUniciteEmail(){
	var result = "";
 
 	verifUniciteEmail(function(unicite_email){
		if (unicite_email == "email_present"){
			alert("email deja en base");
		} else if (unicite_email == "email_unique"){
			alert("email non en base");
		}
 
		result = unicite_email;
	});
 
	return result;
}
 
var verif_email = appelVerifUniciteEmail();
 
if( verif_email =="email_present"){/* code*/}

Mais je ne comprends pas pourquoi la version simple ne fonctionne pas :

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
$.post("ajax/inscription.php",{
	'form_input_email': $('#form_input_email').val(),
	'controle_unicite_email': 'OK'
}, function(data){
	if (data == "email_present"){
		alert("email deja en base");
 
		/* code */
	} else if (data == "email_unique"){
		alert("email non en base");
	}
});

Vous devriez préciser le datatype, le type de donnée retourné par le serveur, par exemple "text ":

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
$.post("ajax/inscription.php",{
	'form_input_email': $('#form_input_email').val(),
	'controle_unicite_email': 'OK'
}, function(data){
	if (data == "email_present"){
		alert("email deja en base");
 
		/* code */
	} else if (data == "email_unique"){
		alert("email non en base");
	}
}, "text");

Voir : http://api.jquery.com/jQuery.ajax/ et http://api.jquery.com/jQuery.post/

[viny]

Merci beaucoup,

En effet on obtient la même chose avec la version simple... A réfléchir je ne vois pas dans quel cas l'utilisation d'une fonction de callback est indispensable puisque, si je comprends bien, le script ne s'arrête pas comme en synchrone.

Car pourquoi appeler une fonction quand on a le résultat de la requête plutôt qu'exécuter simplement les instructions comme dans mon exemple simple

Si vous pouviez éclairer ma lanterne à ce sujet...

Merci

[danielhagnoul]

Bonsoir

Après une transaction AJAX, le code à exécuter peut être complexe. Dans ce cas, pour simplifier la présentation et la maintenabilité du code, il est conseillé de le séparer de celui de la transaction AJAX en utilisant une fonction de rappel (callback).

L'usage d'une fonction de rappel est possible avec la plupart des méthodes jQuery.