[AJAX] Vérification instantanée sur un champ

**baggie** · 27/05/2008, 12h25

Bonjour

Avant tout je tiens à préciser que j'ai voulu faire la recherche sur le forum si ce post existait déjà mais la recherche a bugué x). Bref.

Dans un champ de type text, j'ai soit une chaine de type "aaaa" soit un mail.

Quand l'utilisateur tape quelque chose dans ce champ, j'aimerai faire un contrôle instantané pour savoir si ce qui est tapé existe déja dans la base ou pas.
S'il n'existe pas : on affiche "disponible", sinon on affiche "pris" dans le div sous ce champ.

Voici mon code (je n'ai pas mis le html) :

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
 
var urlter = "start_ajax.php?Action=cpt&Etape=ajax_dest&recherche=";
function writediv(texte)
{
	document.getElementById('verifbox').innerHTML = texte;
}
var rgxvir = /\s*,\s*/;
var rgxmail = /\s*@\s*/;
function verifDest() 
{	  
	if(dest != '')
	{
		if(dest.length<3)
	              writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est trop courte</span>');
	        else if(dest.length>20 && !rgxmail.exec(dest) && !rgxvir.exec(dest))
	              writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est trop longue</span>');
	        else 
	        {
	        	writediv('');
	        	http.open("GET", urlter + escape(dest), true);
			http.onreadystatechange = handleHttpResponseTer(dest);
			http.send(null);
	        }
	}
	else writediv('');
}
 
function handleHttpResponseTer(dest)
{
	if (http.readyState == 4) 
	{
	     var responsedest = http.responseText;
	     if (responsedest == 2)
	     {
		writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est deja prise</span>');
	     }
	     else
	     {
		writediv('<span style="color:#1A7917"><b>'+dest+' :</b> cette destination est libre</span>');
	     }
       }
}

Et voici la requête SQL qui renvoie 1 ou 2 suivant si ce que l'utilisateur a entré existe ou non.

Code :

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

1
2
3
4
5
6
 
$ref = $_REQUEST['recherche'];
$SQLdest = "SELECT destination FROM emails WHERE source LIKE '$ref'";
$Q = mysql_db_query($SQLdest);
if(mysql_num_rows($Q)>=1) return 1;
else return 2;

Apparement, en response j'obtiens bien un "2" (FireBug qui le dit) mais ça ne fait strictement rien (aucun affichage).
Donc je ne vois pas ce qui manque/est mal écrit ... Si vous pouviez m'aider =)

**DoubleU** · 28/05/2008, 23h03

Ya deux choses qui ne vont pas, et elles sont au même endroit, sur ton onreadystatechange ^^

La première: http.onreadystatechange attend une fonction en paramètre. En général on ecrit la fonction juste apres mais on peut également la passer en argument. Le problème dans ta façon de faire, c'est qu'en écrivant http.onreadystatechange = handleHttpResponseTer(dest), tu ne lui files pas une fonction mais le retour de l'exécution de ta fonction. Si tu mets les parenthèses, lui il exécute, donc tu ne retournes pas de fonction.
Pour suivre ta façon de faire, il aurait fallu écrire http.onreadystatechange = handleHttpResponseTer. Mais ca nous conduit au 2e problème.

Le callback n'attend pas de paramètre, donc quand ton objet xhr exécute son callback, il ne passe pas de paramètre. Donc forcément, ton traitement ne va pas marcher.

La solution pour résoudre ton problème: faire une closure sur ton callback pour lui faire retourner une fonction qui aura dans son scope les paramètres que tu veux lui passer:

Code :

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

1
2
3
4
5
6
http.onreadystatechange = function(_dest){
                               return function(){
                                     alert(_dest);
                                      // ici le traitement que tu voulais exécuter
                                }(dest)
}

**baggie** · 29/05/2008, 09h04

Merci pour ta réponse !

Par contre je ne suis pas sûre d'avoir bien compris : si je mets ce que tu as dit dans mon "http.onreadystatechange", le traitement que je voulais exécuter correspond à ce que j'avais mis dans ma fonction "function handleHttpResponseTer" ?

En fait j'ai testé donc en faisant comme ça, mais dans les alert, j'ai des undefined qui apparaissent et ensuite dans mon div j'ai toujours érit : "cette destination est déjà prise".

**DoubleU** · 29/05/2008, 09h12

Par contre je ne suis pas sûre d'avoir bien compris : si je mets ce que tu as dit dans mon "http.onreadystatechange", le traitement que je voulais exécuter correspond à ce que j'avais mis dans ma fonction "function handleHttpResponseTer" ?

Oui

En fait j'ai testé donc en faisant comme ça, mais dans les alert, j'ai des undefined qui apparaissent et ensuite dans mon div j'ai toujours érit : "cette destination est déjà prise".

Désolé, jme suis planté, j'ai pas mis l'appel au bon endroit. Le (dest) doit êtresur la fonction englobante, pas la fonction interne.

Code :

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

1
2
3
4
5
6
http.onreadystatechange = function(_dest){
                               return function(){
                                     alert(_dest);
                                      // ici le traitement que tu voulais exécuter
                                }
}(dest)

**baggie** · 29/05/2008, 09h35

J'ai fait la modification, comme résultat j'ai ce que j'ai tapé qui s'affiche dans le alert() mais 5 fois o_O. Une fois que j'ai cliqué sur les 5 'Ok' de mes alert, il me dit toujours que la destination est libre. Pourtant, la requête n'a pas l'air fausse :/

**E.Bzz** · 29/05/2008, 09h40

Bonjour,

Envoyé par baggie

Pourtant, la requête n'a pas l'air fausse :/

Ben si : il manque pas des caractères génériques, là pour un LIKE :

Code :

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

LIKE '$ref'

?

A+

**baggie** · 29/05/2008, 09h45

J'ai changé le LIKE en = car en fait oui je n'en avais pas besoin.
Ce qui me donne :

Code :

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

$SQLdest = "SELECT destination FROM emails WHERE source = '$ref'";

Mais le résultat reste exactement le même, il me dit uniquement que les destinations sont libres alors que ça n'est pas forcément le cas =/

**E.Bzz** · 29/05/2008, 09h51

Code :

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

if (responsedest == "2")

Ton Javascript va récupérer du caractère et non du numérique ...

A+

**baggie** · 29/05/2008, 09h55

Même avec les ", ça n'a rien changé du tout.

**E.Bzz** · 29/05/2008, 10h00

Tu as vérifié que la valeur récupérée sur le serveur correspondait exactement (cf. ton escape() ) ?

Elle vient d'où cette variable "dest" ?

A+

**baggie** · 29/05/2008, 10h05

Ma variable dest vient de ce que l'on tape dans le div :

Code :

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

var dest = document.getElementById('desti').value;

Quant à mon escape, j'ai testé en l'affichant sur ma page, et il affiche bien ce que je tape dans mon champ.

[EDIt] J'ai peut-être trouvé mon problème : dans ma requête, le $ref est un $_REQUEST. Si je le récupère bien dans ma requête, il faut que j'arrive à récupérer cette valeur là dans le Ajax non ? Ou simplement le fait d'exécuter cette requête suffira ?

Code :

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

1
2
3
4
5
$ref = $_REQUEST['recherche'];
	$SQLdest = "SELECT destination FROM emails WHERE source = '$ref'";
	$Q = mysql_db_query($SQLdest);
	if(mysql_num_rows($Q) != 0) return 1;
	else return 2;

[/EDIT]

**E.Bzz** · 29/05/2008, 10h10

Envoyé par baggie

Ma variable dest vient de ce que l'on tape dans le div :

Dans un div, ça m'étonnerait

Envoyé par baggie

Quant à mon escape, j'ai testé en l'affichant sur ma page, et il affiche bien ce que je tape dans mon champ.

Ta bdd est certainement capable de faire une comparaison de chaines !
Si elle ne trouve pas la valeur, c'est qu'il n'y a pas de correspondance avec la valeur que tu lui passes. Je peux pas vérifier : c'est toi qui as les clés

Envoyé par baggie

[EDIt] J'ai peut-être trouvé mon problème : dans ma requête, le $ref est un $_REQUEST. Si je le récupère bien dans ma requête, il faut que j'arrive à récupérer cette valeur là dans le Ajax non ? Ou simplement le fait d'exécuter cette requête suffira ?

Code :

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

1
2
3
4
5
$ref = $_REQUEST['recherche'];
	$SQLdest = "SELECT destination FROM emails WHERE source = '$ref'";
	$Q = mysql_db_query($SQLdest);
	if(mysql_num_rows($Q) != 0) return 1;
	else return 2;

[/EDIT]

Pas compris

A+

**DoubleU** · 29/05/2008, 10h12

Pas compris

Ca me rassure, je me trouvais con sur le coup ^^

Tu fais bien des echos de ton résultat dans ton php?

**DoubleU** · 29/05/2008, 10h14

Code :

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

1
2
if(mysql_num_rows($Q)>=1) return 1;
else return 2;

Code :

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

1
2
3
4
5
6
7
8
	     if (responsedest == 2)
	     {
		writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est deja prise</span>');
	     }
	     else
	     {
		writediv('<span style="color:#1A7917"><b>'+dest+' :</b> cette destination est libre</span>');
	     }

ca serait pas le contraire en fait? 1 quand ta destination est prise, et 2 quand elle ne l'est pas?

**E.Bzz** · 29/05/2008, 10h17

Envoyé par DoubleU

Tu fais bien des echos de ton résultat dans ton php?

PHP c'est pas mon domaine, mais ça sent effectivement la confusion entre return et echo

A+

**DoubleU** · 29/05/2008, 10h21

Apparement, en response j'obtiens bien un "2" (FireBug qui le dit) mais ça ne fait strictement rien (aucun affichage).

Pas sûr, mais a tout hasard ^^

**baggie** · 29/05/2008, 10h29

Euh ouai non pas dans mon div x)

Bon je récapitule parce que là j'ai rien dit de compréhensible.

Dans mon champ input de type text (et non un div

) je tape une destination :

Code :

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

<input type='text'  name='destination' id='desti' onKeyUp="verifDest();">

Donc dès que je tape une lettre, j'appelle la fonction verifDest :

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
 
var urlter = "start_ajax.php?Action=cpt&Etape=ajax_dest&recherche=";
 
function writediv(texte)
{
	document.getElementById('verifbox').innerHTML = texte;
}
var rgxvir = /\s*,\s*/;
var rgxmail = /\s*@\s*/;
function verifDest() 
{	  
	var dest = document.getElementById('desti').value;
	if(dest != '')
	{
	       if(dest.length<3)
                     writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est trop courte</span>');
	       else if(dest.length>20 && !rgxmail.exec(dest) && !rgxvir.exec(dest))
	             writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est trop longue</span>');
	       else 
	       {
	       	     writediv('');
                     // Appel de la requête SQL
	       	     http.open("GET", urlter + escape(dest), true);
		     http.onreadystatechange = 
                                function(_dest)
				{
                               		return function()
                               		{
                                		if (http.readyState == 4) 
						{
				     			var responsedest = http.responseText;
				     			if (responsedest == 1)
				     			{
								writediv('<span style="color:#cc0000"><b>'+dest+' :</b> cette destination est deja prise</span>');
				     			}
				     			else
				     			{
								writediv('<span style="color:#1A7917"><b>'+dest+' :</b> cette destination est libre</span>');
				     			}
						}
                                       }
			}(dest)
			http.send(null);
	             }
	        }
	        else writediv('');
}

Et enfin ma requête :

Code :

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

1
2
3
4
5
6
 
$ref = $_REQUEST['recherche'];
$SQLdest = "SELECT destination FROM emails WHERE source = '$ref'";
$Q = dbiDoBD($SQLdest);
if(dbiNumRows($Q) != 0) return 1;
else return 2;

[EDIT] FireBug me renvoit bien le 2 en response et non, je fais des return, je ne PEUX pas utiliser de echo =/[/EDIT]

**baggie** · 29/05/2008, 10h50

Désolée pour le double post mais je viens de résoudre mon problème.

Mauvais champ dans la clause du WHERE dans ma requête ...

Merci beaucoup à vous deux pour l'aide en tout cas !!

[AJAX] Vérification instantanée sur un champ

JavaScript

Discussions similaires

Partager

Partager