Discussion :

[cz1702]

Bonjour,

J'utilise Ajax pour recharger le contenu de ma page en fonction du texte saisie dans un input.
Lors de la saisie je fais appel à javascript (avec onkeyup) qui lui même affiche le contenue d'une page PHP dans une DIV
Mon problème se situe au moment de la saisie car lorsque la page PHP est appelé toutes les lettres saisies ne sont pas prises en compte, ce qui donne par exemple bjor à la place de bonjour.

Avez une suggestion pour améliorer ça (autre que d'alléger ma page PHP) ?

Merci

PS : Voici un extrait de mon code

Code HTML :

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

1
2
3
 
<input type=text onKeyUp='req(this.value);'>
<div id='dive'>Tapez une partie du nom ...</div>

Code javascript :

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
 
 function writediv(texte)
 {
 document.getElementById('dive').innerHTML = texte;
 }
function req(req)
	{
  texte = file('req.php?R='+escape(req));
	writediv(texte);
}
 function file(fichier)
 {
 if(window.XMLHttpRequest) // FIREFOX
 xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 else
 return(false);
 xhr_object.open("GET", fichier, false);
 xhr_object.send(null);
 if(xhr_object.readyState == 4) return(xhr_object.responseText);
 else return(false);
 }

[Bovino]

C'est normal puisque tu es en mode synchrone (paramètre false de xhr_object.open()).
Du coup, lors de chaque requête, la page est bloquée et les saisies effectuées pendant ce temps non prises en compte.

L'idée serait de faire des requêtes asynchrone et de stopper la requête en cours (si elle existe) à chaque nouvelle saisie (à l'aide de la méthode abort()) avant de relancer la nouvelle requête.

[peck]

Bonjour,

Pour ma part j'utilise jQuery qui permet de faire ca assez facilement.
http://jqueryui.com/demos/autocomplete/#remote

Sinon je ne vois pas pourquoi tu as un tel décalage...

[cz1702]

C'est normal puisque tu es en mode synchrone (paramètre false de xhr_object.open()).
Du coup, lors de chaque requête, la page est bloquée et les saisies effectuées pendant ce temps non prises en compte.

L'idée serait de faire des requêtes asynchrone et de stopper la requête en cours (si elle existe) à chaque nouvelle saisie (à l'aide de la méthode abort()) avant de relancer la nouvelle requête.

Merci j'ai refait mon code pour faire des requêtes asynchrone et ça marche bien (je ne me suis pas occupé du abort pour l'instant comme ça marche)

Voici ma nouvelle fonction file 1er argument la requête (fichier PHP chez moi) 2ème argument la div où insérer les données.

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
 function file(fichier,dive)
 {
 if(window.XMLHttpRequest) // FIREFOX
 xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 else
 return(false);
 xhr_object.open("GET", fichier, true);
 xhr_object.send(null);
 
	xhr_object.onreadystatechange = function()
	{
		document.getElementById(dive).value="Wait server...";
		if(xhr_object.readyState == 4)
		{
			if(xhr_object.status == 200)
			{
				 document.getElementById(dive).innerHTML=xhr_object.responseText;
			}
			else
			{
				 document.getElementById(dive).innerHTML="Error: returned status code " + req.status + " " + req.statusText;
			}
		}
	};

@peck : jQuery c'est très bien (je l'ai déjà utilisé dans d'autre cas) mais là je ne veux pas juste faire un autocomplete

Merci !