JavaScript Recharger DIV

Pour mettre à jour un seul div sans recharger toute la page, chargez du balisage de remplacement dans une cible stable. La méthode .load() de jQuery peut demander la page actuelle et sélectionner uniquement cette cible dans la réponse. Une autre approche consiste à utiliser window.setInterval() pour modifier le contenu de la cible selon un calendrier ; le minuteur planifie une action, mais ne récupère ni ne rafraîchit le contenu à lui seul.

Les exemples HTML ci-dessous sont du code source destiné à une page de navigateur et n’ont pas été exécutés ici. Ils utilisent jQuery 3.6.0 depuis son CDN : la page doit donc avoir accès au réseau pour charger cette bibliothèque. L’exemple JavaScript autonome qui sélectionne des messages a été exécuté et a produit la sortie Data received affichée ; cette étiquette reste en anglais dans le bloc de sortie. L’exemple n’accède pas au DOM d’un navigateur et n’attend pas qu’un minuteur se déclenche.

Recharger un div depuis la page actuelle avec jQuery .load()

Attribuez un id au conteneur de contenu, puis appelez .load() sur cet élément. Le premier argument associe window.location.href, l’URL de la page actuelle, à un espace puis au sélecteur #here. jQuery demande cette URL, extrait l’élément correspondant de la réponse et place son contenu dans la cible existante. La partie sélectionnée est ainsi mise à jour sans remplacer toute la page. La page source doit renvoyer l’élément cible, et la configuration de l’origine de la page et du serveur doit autoriser la requête.

Exécutez cet exemple dans une page de navigateur qui inclut le script jQuery :

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here">This content is loaded again from the current page.</div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here");
  });
</script>

La forme URL suivie d’un sélecteur est propre à la méthode .load() de jQuery. Laissez un espace avant le sélecteur afin que jQuery puisse le distinguer de l’URL de la requête. Si l’URL de la page contient un fragment, le navigateur ne l’envoie pas dans la requête HTTP.

Charger uniquement les éléments enfants d’un div avec un sélecteur

Le sélecteur placé après l’URL permet de restreindre davantage la réponse. Dans " #here > *", l’espace initial sépare le sélecteur de l’URL, #here désigne le conteneur source et > sélectionne ses éléments enfants directs. Le div cible lui-même n’est pas sélectionné comme contenu à insérer. Utilisez cette forme lorsque le conteneur source sert d’enveloppe et que vous souhaitez remplacer les éléments qu’il contient tout en conservant le div cible en place.

Cette page utilise le même identifiant littéral here dans le balisage et le sélecteur :

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here"><p>First item</p><p>Second item</p></div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here > *");
  });
</script>

Le sélecteur #here > * comprend les éléments enfants directs, mais pas les nœuds de texte placés directement dans le conteneur. Si vous avez besoin de tous les descendants, choisissez délibérément un sélecteur de descendants et tenez compte du balisage qu’il renverra.

Mettre à jour un div à intervalles réguliers avec window.setInterval()

Utilisez window.setInterval() lorsque le contenu doit changer de façon répétée après un délai fixe. Ce délai est exprimé en millisecondes : une valeur de 6000 ms demande au navigateur de planifier un rappel environ toutes les six secondes, même si une page très sollicitée peut l’exécuter plus tard. Le rappel doit effectuer la mise à jour, par exemple en attribuant un nouveau message à textContent du div. Appelez window.clearInterval() lorsque les mises à jour doivent s’arrêter, par exemple après un nombre défini de changements ou lors de la suppression d’un composant.

Le code source de page de navigateur suivant fait défiler deux messages et s’arrête après l’affichage des deux :

<div id="status">Waiting for an update</div>
<script>
  const messages = ["Data received", "Ready for the next request"];
  const status = document.getElementById("status");
  let index = 0;
  const timerId = window.setInterval(function () {
    status.textContent = messages[index];
    index += 1;
    if (index === messages.length) {
      window.clearInterval(timerId);
    }
  }, 6000);
</script>

Pour illustrer la même rotation de contenu avec du JavaScript exécutable, le code ci-dessous sélectionne les messages dans l’ordre. Il montre la logique de sélection ; il n’accède pas au DOM d’un navigateur et n’attend pas qu’un minuteur se déclenche.

const messages = ["Data received", "Ready for the next request"];
let index = 0;

function nextMessage() {
  const message = messages[index];
  index += 1;
  return message;
}

console.log(nextMessage());

Data received

Le minuteur modifie le div parce que son rappel met à jour textContent ; un compte à rebours qui ne change qu’un nombre ailleurs ne rafraîchirait pas le message du div. Choisissez le délai et la condition d’arrêt adaptés aux besoins de la page.