Discussion :

[PapyJP]

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.

[danielhagnoul]

• https://javascript.developpez.com/fa...ipt/?page=Ajax
• https://javascript.developpez.com/fa...jax.asynchrone
• https://javascript.developpez.com/fa...e=Ajax#majAjax

Mozilla

• https://developer.mozilla.org/fr/docs/AJAX/Premiers_pas
  

[PapyJP]

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...

[NoSmoking]

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 ?

[PapyJP]

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...

[Loralina]

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>';
        }
?>

[PapyJP]

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"?