Discussion :

[Soundboy39]

Bonjour à toutes et tous !

Voilà je bloque sur un problème assez basique auquel je ne trouve pas de solution concrète...

Je suis en train de faire un champ de recherche dynamique. J’interroge donc ma base de donnée avec Ajax à chaque fois que la valeur du champ est modifié.

J’aimerais qu'à chaque fois qu'une nouvelle lettre est tapée la nouvelle requête annule la requête en cours.

J'ai déjà essayer de passer le paramètre "async" en false pour passer en mode synchrone mais mes requêtes continus à s'enchainer...

Voici le code de la requête :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var myRequest = new Request({
		    url: 'index.php',
		    method: 'get',
		    async: 'false',
		    onSuccess: function(responseText){
				alert(responseText);		
		    },
		    onFailure: function(){
		        myElement.set('text', 'Sorry, your request failed :(');
		    }
		});
		myRequest.send('type=' + type + '&task=contentSearch&value=' + value);

Merci d'avance pour vos idée et bon week end !

[Invité]

Bonsoir,

Tu as passé la chaîne 'false' et non le booléen false, et la chaîne 'false' vaut... true

Cela dit, je ne recommande pas de passer en synchrone car à chaque fois que tu taperas une lettre ça va figer l'interface le temps que le serveur réponde.

Pour moi le plus simple ça serait de "remonter" l'objet request dans un scope plus global et de le tester dans ton évènement :

Code :

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

1
2
3
4
5
6
7
var myRequest = new Request (...);
myElement.addEvent('mouseup', function() {
    if (myRequest.isRunning()) {
        myRequest.cancel();
    }
    myRequest.send(...);
});

Et pour faire encore mieux ? Tu ne fais qu'une seule requête pour la première lettre et tu affines le tri sur tes résultats à chaque lettre suivante sans refaire appel au serveur, ça sera beaucoup plus performant...

[Soundboy39]

Bonjour luca et merci pour la réponse,

Effectivement la fait d'utiliser (correctement ) l'option "async" ne résoud pas du tout mon problème...

Je pense être sur la bonne voie avec la méthode "isRuning()"...
Par contre moi ce que j'aimerais faire c'est :
- savoir si une requête est déjà en cours;
- si OUI : l'annuler pour en refaire une autre;

En regardant ton code j'ai vu des différence avec le miens... c'est pour cette raison que j'ai du mal a adapter ta solution, comment faire pour l'adapter à mon code (que je remet ci-dessous) ??

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
 
function fonctionDeclencheeParEvenementKeyup()
{
        var running_request = //Comment détecter une requête en cours vis à vis de mon context ??...
        if(running_request)
        {
              //...et comment l’annuler avant d'en faire une autre ??
        }
               var myRequest = new Request({
		    url: 'index.php',
		    method: 'get',
		    async: 'false',
		    onSuccess: function(responseText){
				alert(responseText);		
		    },
		    onFailure: function(){
		        myElement.set('text', 'Sorry, your request failed :(');
		    }
		});
		myRequest.send('type=' + type + '&task=contentSearch&value=' + value);
}

Je trouve pas mal ton idée de faire qu'une seul requête mais il y a 2 inconvénients :
- rapport à mon contexte, je risque d'avoir des problèmes d'affichage quand il y aura beaucoup de résultats;
- je suis là aussi obliger d'annuler toute nouvelle requête;

[Invité]

Pour traiter avec la requête en cours il faut que ton objet Request ait une portée plus globale que celle de ta fonction. Si tu n'es pas à l'aise avec la question de la portée des variables c'est prioritaire de se documenter là dessus si tu ne veux pas rencontrer de gros soucis dans tes développement Javascript...

Sur ton code :

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
 
var myRequest = new Request({
		    url: 'index.php',
		    method: 'get',
		    async: 'false',
		    onSuccess: function(responseText){
				alert(responseText);		
		    },
		    onFailure: function(){
		        myElement.set('text', 'Sorry, your request failed :(');
		    }
		});
 
function fonctionDeclencheeParEvenementKeyup()
{
        if(myRequest.isRunning())
        {
              myRequest.cancel();
        }
 
		myRequest.send('type=' + type + '&task=contentSearch&value=' + value);
}

myRequest étant global, c'est le même objet qui est utilisé à chaque appel de ton handler d'évènement, on peut donc tester si elle est en cours et l'annuler avant de la relancer.

Cela fait un certain temps que je n'ai pas touché à du dév frontend, je ne te garantierais pas que ça soit bullet proof et que ça fonctionne très bien dans 100% des cas, mais je te conseille de creuser dans ce sens.

Si jamais ça ne marche pas tout le temps et que ça paraît "buggy", regarde du côté de cette classe, qui peut à défaut d'annuler tes Requests faire en sorte qu'elles soient traitées dans le bon ordre, une à la fois : http://mootools.net/docs/more/Request/Request.Queue

[Soundboy39]

Merci infiniment Nighty,

Finalement j'ai opté pour ta solution, c'est à dire sortir la requête de ma fonction, et j'ai résolus mon problème !

Effectivement j'ai tendance à oublier la porté des variables en JS, certainement parce que je jongle beaucoup entre JS et PHP...

Encore merci et bonne journée !