[DOM] Affichage etiquette pas precis

bonjour,

J'ai developpé des fonctions me permettant d'afficher des etiquettes dont le contenu est des informations contenues dans une base de données.
En gros au passage de certains elements de tableau (d'un formulaire) de la souris (element par ligne) une etiquette s'affiche et indique des informations de cet element provenant d'une base de donnée (j'utilise pour ce faire ajax).

Techniquement tout marche bien, les bonnes informations s'affichent. Sauf que si je vais un peu vite avec la souris les informations s'echangent entre les lignes. C'est à dire que c'est l'info de ligne 2 au lieu de la ligne 1 qui s'affiche.

J'ai effectué plusieurs tests afin de savoir si l'url était la bonne au passage de la souris. Cette url appelle une page php avec un id propre, cette id permet donc d'interroger la base de données afin d'avoir la bonne info suivant le ligne. J'ai donc stocké l'adresse url dans un input qui me permet de voir l'url appelé au passage de la souris. De ce cote la tout test ok l'url se change bien au passge de la souris meme si c'est un peu rapide.

Je pense donc que le probleme vient au moment du passage de l'url dans l'objet XMLHttpRequest "xhr.open("GET", v_url, true)" . L'url est bonne mais le "xhr.responseText" retourné n'est pas tout le temps bon.

Voila j'espere avoir etait clair, si quelqu'un a une idée ...?

Merci

Peux-tu poster ton code s'il te plait ?
Ce problème est-il propre à un navigateur donné ?

Merci pour ta reponse. Je ne peux pas poster tout le code car c'est un peu long. Voici donc quelques etapes :

1 : recherche des identifiants de ligne et colonne en utilisant DOM et lancement d'une fonction onmouseover. Cette fonction genere une adresse url :

Code:

---

return ("http://127.0.0.1/TravauxVoirie/"+phpFile+".php?idInfoBulle="+escape(idInfoBulle)+ "&idTimeStamp=" + escape(idTS));

---

Pour les tests, j'affiche cette adresse dans un input text. phpfile est determiné suivant la colonne où la souris pointe et idInfoBulle est generé suivant les lignes. Cette etape marche tres bien. Le nom du fichier et l'id se créé instantanement au passage de la souris et cela pour les differents navigateurs.

Par contre j'ai fait un autre test ce matin. J'ai supprimé dans mon URL la variable IdTimeStamp (qui est créée comme cela new Date().getTime()). Cette variable est necessaire quand on fait des mises a jours dans le fomulaire. Si elle n'est pas crée alors les mises à jours dans les etiquettes ne s'affichent pas....du moins dans IE pas car sous firefox il n'est pas necessaire de la créer. (Pour que les mises à jours soient prises en compte, il faut ouvrir une autre page et recharger la page sour IE !). Donc suite a cette suppression, l'affichage de l'étiquette (sous IE) marche quasiment parfaitement ( avec quelques ratés mais c'est bcp mieux!!)

Je sais qu'a l'epoqe j'avais fait de recherches pour savoir comment rafraichir les données sans rechargement de la page. Il me semble que c'etait un probleme de cache et qu'il fallait mettre une (ou plusiers..) ligne de code de ce style :

Code:

---

header("Cache-Control: no-cache, must-revalidate");

---

.. mais ca n'avait pas fonctionné, c'est pourquoi j'ai utilisé une variable timeStamp. Bref , si j'arrive a ne plus utiliser cette variable dans l'URL mon problème sera resolu.

Salut,

A mon avis, les réponses se croisent.

Explications :
- La souris passe sur la 1ère ligne, une requête avec l'id = 1 est envoyée (c'est juste un exemple, les id ne correspondent à rien)
- La souris passe sur la 2ème ligne, une requête avec l'id = 2 est envoyée
- La réponse à la requête avec l'id = 2 arrive en premier, l'étiquette est remplie d'infos de l'id = 2
- La réponse à la requête avec l'id = 1 arrive ensuite (ca peut arriver), l'étiquette est à nouveau remplie, mais avec les mauvaises infos (puisque ta souris se trouve à ce moment sur la 2ème ligne).

Rien de plus simple pour tester cela : firefox + firebug, tu affiches les requêtes xmlhttprequest et tu regardes quelle réponse arrive en premier lorsque le problème se produit.

Si tu as pu vérifier le problème, pour le corriger, il suffit que le serveur renvoie dans la réponse l'id dont tu t'es servi pour créer la requête. Tu compares cet id avec l'id de la ligne actuellement sélectionnée. Si les id concordent, tu affiches les infos, sinon, tu peux oublier la réponse, elle ne te sers plus à rien !

Merci pour ta reponse.J'ai essayé d'afficher le valeur de la reponse de l'objet httpRequest mais je n'y arrive pas sous FF (je l'ai mis en espoin ..?) Et puis comment fait-on pour recuperer l'id de la reponse (afin de le verifier) ?

Sinon, j'ai supprimer la valeur timestamp dans le requete et dans IE ca marche impeccable. Le probleme est donc les soucis de cache dans IE. Mais j'ai trouve une solution. Lors d'un enregistrement d'une donnée, j'ouvre et je ferme tout de suite une fenetre popup (vide), et la , comme par miracle les donnes sont mises a jours (dansmes etiquettes). J'ai trouve cette astuce car un de mes champs est un champ dates que je mets à jours par l'intermediaire d'un calendrier (qui s'ouvre dans un popup) . J'avais essayé tous les astuces (revalidate dans le header par exemple) pour liberer le cache dans IE mais rien a faire..!

Bonjour,
il suffirait de détruire chaque instance Ajax dès qu'elle n'est plus utile, c'est à dire dès qu'elle quitte la zone de laquelle elle est en train d'aller chercher les infos (puisqu'elle ne correspondront de toutes façons pas à la zone suivante).
Sur chaque zone (<tr>, <td>, <div> ou autre) faisant appel à Ajax (sur onmouseover, par ex.) il te suffirait d'ajouter :

Code:

---

onmouseout="ta_variable_xhr.abort();"

---

Ainsi, chaque zone ne récupérera que les infos du xhr qui la concerne ...

A+

Ok, merci. J'ai mis xhr.abort() dans l'evenement mouse out et en enlevant le time stamp de l'url, mais ca n'a rien donné de tres concluant. Donc j'ai supprime de la time stamp et j'ouvre et referme une pop up vide quand je mets à jours des données.