[AJAX] Contrôler la valeur d'un champ toutes les x secondes

Version imprimable

03/06/2008, 10h18
baggie

[AJAX] Contrôler la valeur d'un champ toutes les x secondes

Bonjour ^^

j'ai un champ input de type text dans lequel je tape une adresse email.
Je tape le début d'une adresse que je veux, et ensuite s'affiche la liste de tous les domaines possibles.
Ex : je tape : contact@ et une liste avec : truc.fr, bidule.org, machin.com s'affiche dessous.

Je sélectionne ce que je veux dans cette liste, et mon choix s'affiche à la suite de ce que j'avais tapé.
Ex : contact@truc.fr

C'est de l'autocomplete avec YUI, ce qui fait que la modification du champ n'est pas prise en compte, donc onChange non détecté vu qu'il n'y a pas de perte de focus.

J'ai alors pensé à faire un contrôle de ce qu'il y a dans ce champ toutes les x secondes pour que mes fonctions fonctionnent bien.
Ex : la vérification de la disponibilité de l'adresse mail, avec mon système actuel, cette fonction vérifiera uniquement "contact@" et non contact@truc.fr.

Est-ce la meilleure solution ? Dois-je le faire en Ajax ou y'a-t-il des moyens plus simples ? Si c'est en Ajax, j'avoue qu'un peu d'aide ne serait pas de refus ... =/

Merci d'avance.
03/06/2008, 10h26
versus68

Une piste pour t'aider :

l'évènement onkeyup. Comme ça, au lieu de controler toutes les secondes ce que l'utilisateur a tapé, tu controles juste lorsque l'utilisateur vient d'écrire quelque chose. ça te fera déjà des économies de ressources et tu n'auras pas à gérer de timer ou autre.
03/06/2008, 10h32
baggie

J'y ai pensé à ça, mais comme l'utilisateur va sélectionner un choix dans la liste qui s'affiche sous le champ, un évènement onkeyup ne sera pas détecté puisque l'utilisateur n'aura rien tapé au clavier mais juste cliqué sur un choix =/
03/06/2008, 10h43
E.Bzz

Bonjour,
je croyais que c'était résolu :?

A+
03/06/2008, 10h52
baggie

Ca c'était un autre problème, mais toujours sur l'autocomplétion en effet. La vérification s'effectue sans problème (d'où le problème résolu) mais j'ai fait quelques modifications sur mon autocomplétion et donc maintenant, il faut que je contrôle un autre champ (et non pas celui du problème résolu ^^). Sauf que ce champ est différent, l'utilisateur ne tape pas tout, mais sélectionne également un morceau de l'adresse mail dans la liste.

Depuis que je fais mon autocomplete, j'ai toujours eu ce problème de onchange non détecté, alors je cherche des solutions et j'ai pensé à celle-ci, c'est pour ça =)
03/06/2008, 10h56
E.Bzz

Citation:

Envoyé par baggie

Depuis que je fais mon autocomplete, j'ai toujours eu ce problème de onchange non détecté, alors je cherche des solutions et j'ai pensé à celle-ci, c'est pour ça =)

Mais pourquoi est-ce un problème ?
Puisque tu as un script qui alimente ton champ (et qui fait que le onchange ne se déclenche pas), pourquoi n'appelles-tu pas ton script de contrôle à la fin du script d'alimentation ?

A+

Euh ... oui c'est pas faux ça. J'avais déja testé quelque chose du genre en mettant la méthode blur() sur mon champ après la fonction d'autocompletion, mais dès chargement de la page ça le prenait en compte donc ça ne fonctionnait pas.

Je dois certainement le placer au mauvais endroit ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function autoCompInit()
    {
        yahooDataSource = new YAHOO.widget.DS_XHR("start_ajax.php",["\\n", ";"]);
        // Appel à la fonction où se trouve la requête SQL pour la liste
        yahooDataSource.scriptQueryAppend = "Action=$_REQUEST[Action]&Etape=ajax_liste";
        yahooDataSource.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
        yahooAutoComp = new YAHOO.widget.AutoComplete('reclogm','reclogm_dd', yahooDataSource);
        yahooAutoComp.queryDelay = 0.1;
        yahooAutoComp.maxResultsDisplayed = 15;
        yahooAutoComp.minQueryLength = 3;
        yahooAutoComp.dataRequestEvent.subscribe(showWaiter);
        yahooAutoComp.dataReturnEvent.subscribe(hideWaiter);
        yahooAutoComp.formatResult = function(oResultItem, sQuery) { return  (oResultItem[1] + " <span style='color:#006699'>&nbsp;(" + oResultItem[2] + ")</span>"); }
    }

J'ai testé de le mettre juste après ou carrément à l'intérieur mais rien à faire :/

03/06/2008, 11h06
E.Bzz

Heu ... :koi: il est où ton script de contrôle dans tout ça ?

A+

J'ai défini ma fonction de contrôle juste après, mais l'appel à la fonction je ne sais justement PAS où le placer pour qu'il fonctionne.

Vla ma fonction :

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
 
function verifLogin()
{
	var login = document.getElementById('reclogm').value;
	if(login != '')
	{
		if(login.length<2)
	              writedivp('<span style="color:#cc0000"><b>'+login+' :</b> Email trop court !</span>');
               else if(login.length>50 && !rgxvir.exec(login))
	              writedivp('<span style="color:#cc0000"><b>'+login+' :</b> Email trop long</span>');
	        else 
	        {
	        	writedivp('');
	        	http.open("GET", urlbis + escape(login), true);
			http.onreadystatechange = 
                               function(_login)
			       {
                               		return function()
                               		{
                               			if (http.readyState == 4) 
		  				{
	        		     			var responselogin = http.responseText;
				     			if (responselogin == 1)
								writedivp('<span style="color:#cc0000"><b>'+login+' :</b> Email déja créé</span>');
				     			else 
				        			writedivp('<span style="color:#1A7917"><b>'+login+' :</b> Cet email sera créé</span>');
			    			}
                              		}
			      }(login)
		http.send(null);
	       }
	}
	else writedivp('');
}

03/06/2008, 11h15
E.Bzz

Code:

yahooAutoComp.formatResult = function(oResultItem, sQuery) { verifLogin(); return (oResultItem[1] + " <span style='color:#006699'> (" + oResultItem[2] + ")</span>"); }

Marche pas ça ?

A+
03/06/2008, 11h19
baggie

Non, ça fait buguer l'autocomplétion et la vérification s'effectue même avant d'avoir sélectionné quelque chose dans la liste (et une fois un choix fait, ça ne garde que ce que j'ai tapé).

[EDIT] C'est bon, j'ai trouvé où placer ma fonction ... Dans le remplissage automatique de mes champs, je la mets au même endroit,mais évidemment c'est une partie de code que je n'avais pas mise puisque je la croyais inutile pour mon problème. (pas taper ><)

Merci E.Bzz pour la solution tout à fait logique à laquelle je n'ai pas du tout pensé ! [/EDIT]
03/06/2008, 11h31
E.Bzz

Citation:

Envoyé par baggie

[EDIT] C'est bon, j'ai trouvé où placer ma fonction ... Dans le remplissage automatique de mes champs, je la mets au même endroit,mais évidemment c'est une partie de code que je n'avais pas mise puisque je la croyais inutile pour mon problème. (pas taper ><)

:ccool:

A+

Petite question si quelqu'un passe par ici.

Pour que deux fonctions javascript se déclenchent à un même endroit, j'ai créé une fonction globale() contenant les deux fonctions que je souhaite déclencher :
Code:

1 2 3 4 5 6 function globale() { verifLogin(); ajaxinfo(); }
Uniquement la première fonctionne, ça ne passe pas à la seconde. Est-ce en conflit parce que les deux fonctions se servent de la valeur du même champ?

Vala où je l'ai appelée :
Code:

1 2 3 4 5 6 7 8 yahooAutoComp.formatResult = function(oResultItem, sQuery) { return (oResultItem[1] + " <span style='color:#006699'> (" + oResultItem[2] + ")</span>" ); } yahooAutoComp.itemSelectEvent.subscribe(function(type,args) { document.fRecherche.reclogm.value = args[2][0] + "@" + args[2][1]; document.fRecherche.savereclogm.value = args[2][0] + "@" + args[2][1]; globale(); } );

03/06/2008, 14h36
E.Bzz

Citation:

Envoyé par baggie

Uniquement la première fonctionne, ça ne passe pas à la seconde. Est-ce en conflit parce que les deux fonctions se servent de la valeur du même champ?

Certainement pas.
Par contre il y a peut être plantage à l'exécution (à la fin de la 1° ou en début de la 2°). ca peut arriver en cas d'accès à un id non unique, par exemple ...

A+
03/06/2008, 14h38
baggie

Merci pour ta réponse, je vais voir si je peux y faire quelque chose =)