IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] Affichage etiquette pas precis


Sujet :

JavaScript

  1. #1
    Membre régulier
    Inscrit en
    Février 2005
    Messages
    250
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 250
    Points : 96
    Points
    96
    Par défaut [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

  2. #2
    Membre confirmé Avatar de d-Rek
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2007
    Messages : 438
    Points : 455
    Points
    455
    Par défaut
    Peux-tu poster ton code s'il te plait ?
    Ce problème est-il propre à un navigateur donné ?

  3. #3
    Membre régulier
    Inscrit en
    Février 2005
    Messages
    250
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 250
    Points : 96
    Points
    96
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Juillet 2003
    Messages
    89
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2003
    Messages : 89
    Points : 102
    Points
    102
    Par défaut
    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 !

  5. #5
    Membre régulier
    Inscrit en
    Février 2005
    Messages
    250
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 250
    Points : 96
    Points
    96
    Par défaut
    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..!

  6. #6
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    onmouseout="ta_variable_xhr.abort();"
    Ainsi, chaque zone ne récupérera que les infos du xhr qui la concerne ...

    A+

  7. #7
    Membre régulier
    Inscrit en
    Février 2005
    Messages
    250
    Détails du profil
    Informations forums :
    Inscription : Février 2005
    Messages : 250
    Points : 96
    Points
    96
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 26/06/2008, 02h34
  2. Réponses: 2
    Dernier message: 20/06/2007, 15h31
  3. [DOM] DOM: affichage des modifications
    Par Bengo dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 04/06/2007, 16h24
  4. Du JS à l'affichage et pas à l'impression
    Par cedricgirard dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 05/07/2006, 13h44
  5. Affichage etiquette-pourcentage graphique
    Par alexbubs dans le forum Access
    Réponses: 1
    Dernier message: 24/10/2005, 09h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo