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 :

Evènements liés à la modification du DOM


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 26
    Par défaut Evènements liés à la modification du DOM
    Bonsoir à tous
    Je pense que la réponse à ma question doit se trouver quelque part dans le forum, mais je n'arrive pas à la formuler correctement e je ne parviens dont pas à trouver cette réponse.

    Voici ce dont il s'agit:

    Quand on effectue des modifications dans le DOM, par exemple lorsqu'on reçoit le résultat d'une requête AJAX et qu'on l'utilise pour générer ou modifier une partie du DOM, on n'est jamais sûr que cette modification est effectivement prise en compte.
    Dans le cas qui me préoccupe actuellement, je reçois sous forme XML une structure assez grande, et je la transforme en JS pour obtenir une <table> que j'insère dans une <div>
    Si je mets immédiatement après cette insertion une instruction qui agit sur cette <table>, elle n'est pas prise en compte.
    J'en suis réduit, faute de mieux, à lancer cette instruction par un setTimeout que j'ai expérimentalement fixé à 500ms, car les valeurs inférieures que j'ai utilisées se sont révélées insuffisantes dans certains cas.
    Il serait plus propre de déclencher cette instruction par un évènement exprimant le fait que le changement du DOM a effectivement été pris en compte.

    Existe-t-il un tel évènement, similaire à "onload"? ce n'est pas exactement de "chargement" dont il s'agit, mais conceptuellement c'est très proche

    Merci de votre aide.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 26
    Par défaut
    Merci pour la réponse,mais mon problème n'est pas "comment utiliser AJAX", c'est un domaine où je me sens relativement confortable.
    Le problème vient après:
    Ce que je fais:
    1. je récupère une (assez grosse) structure en XML par AJAX
    2. je génère une <table> à partir de cette structure et je l'insère dans une <div> par appendChild


    Jusque là tout va bien
    Mais comme ma table est plus grande que la <div>, je voudrais scroller le résultat à un certain endroit, que j'ai noté avant de faire ma manipulation de DOM.
    C'est là que je suis obligé de mettre un setTimeout pour effectuer le scroll, car si j'écris directement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    div.appendChild(table)
    div.scrollTop = oldvalue
    ça ne fait rien du tout, il faut attendre que le DOM soit mis à jour.

    Ce que je cherche à faire, c'est d'éviter ce setTimeout dont la durée est purement expérimentale, en le remplaçant par quelque chose du genre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    div.addEventListener("domReady", fonction-de-scroll)
    Je cherche donc si un évènement de type "domReady" existe.
    Comme je l'ai dit dans mon message précédent, il semble que cela nous amène à utiliser MutationObserver, et là je suis comme une poule qui a trouvé un couteau...

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    je voudrais scroller le résultat à un certain endroit, que j'ai noté avant de faire ma manipulation de DOM.
    comment est déterminé cet endroit, appartient-il à la table ?

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 26
    Par défaut
    Désolé de n'avoir pas répondu plus tôt, je n'étais pas disponible ces derniers jours.
    Bien entendu que cet endroit appartient à la table, mais ce n'est pas le point qui me préoccupe, je pense que je ne me suis pas bien expliqué.
    Le point que j'essaie d'aborder, c'est l'utilisation pratique de MutationObserver, qui vient remplacer les anciens évènements que j'aurais voulu utiliser, mais qui sont obsolètes.
    On trouve très peu d'information sur ce sujet, et de plus ce sont des informations qui récapitulent ce que savent ceux qui savent, et non pas des informations à destination de ceux qui ne savent pas...

  6. #6
    Membre émérite
    Femme Profil pro
    Autre
    Inscrit en
    Janvier 2017
    Messages
    340
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Janvier 2017
    Messages : 340
    Par défaut
    Bonjour,
    Mais comme ma table est plus grande que la <div>, je voudrais scroller le résultat à un certain endroit, que j'ai noté avant de faire ma manipulation de DOM.
    Il me semble que ce devrait être immédiatement possible.
    Voici un brouillon, avec au passage un exemple d'utilisation de MutationObserver (il suffit de reprendre l'exemple ici : https://developer.mozilla.org/fr/doc...tationObserver) :
    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
    27
    28
    <div id="contTabl" style="max-height:200px;overflow:auto;"></div>
    <script>
    var xhr_;
     
    (xhr_=new XMLHttpRequest()).onreadystatechange=function(ev_)
    	{
    	if(this.readyState===XMLHttpRequest.DONE)
    		{
    		var ob_contTablHtml;
    		var ob_obseMuta;
    		var ob_tablHtml;
     
    		(ob_obseMuta=new MutationObserver(function(ar_)
    			{
    //			ob_contTablHtml.scrollTop=200;
    			ar_.forEach(function(ob_)
    				{
    				console.log(ob_.type);
    				});
    			})).observe(ob_tablHtml=document.createElement("table"),{childList:true});
    		ob_tablHtml.innerHTML=this.responseText;
    		(ob_contTablHtml=document.getElementById("contTabl")).appendChild(ob_tablHtml);
    		ob_contTablHtml.scrollTop=100;
    		}
    	};
    xhr_.open("GET","contenu.php",true);
    xhr_.send();
    </script>
    Fichier php :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <?php
    $i=0;
    while(++$i<101)
            {
            echo '<tr><td>'.$i.'</td></tr>';
            }
    ?>

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 26
    Par défaut Utilisation de MutationObserver?
    Après recherches sur Internet, je trouve le concept de "MutationObserver"
    Malheureusement les exemples donnés ne sont pas très parlant: il s'agit toujours d'enregistrer dans la console des traces des modifications apportées au DOM, mais ça manque de clarté à mon goût, il y a plein de sous-entendus sur la nature des propriétés de l'objet MustationObserver, que le lecteur es sensé connaître
    Voir https://hacks.mozilla.org/2012/05/do...r-performance/
    qui est jusqu'à présent le document le plus clair que j'ai trouvé.
    Y aurait il quelque part un "MutationObserver pour les nuls"?

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

Discussions similaires

  1. Réponses: 2
    Dernier message: 14/12/2015, 13h02
  2. Gestion des objets liés à un element du DOM
    Par RapotOR dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 07/02/2010, 13h28
  3. [DOM] Surveiller une modification du DOM (lib prototype)
    Par Cladjidane dans le forum Bibliothèques & Frameworks
    Réponses: 9
    Dernier message: 04/02/2008, 14h58
  4. [DOM] Modification du DOM non visible lors d'un setInterval
    Par Mr N. dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 02/11/2007, 14h36
  5. [DOM] Modification du DOM d'une popup
    Par Mike_69 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 28/03/2007, 13h28

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