JavaScript Recharger DIV

1. Utilisez window.location.href dans .load() pour recharger un div en JavaScript
2. Utilisez " #id > *" avec .load() pour recharger un div en JavaScript
3. Utilisez window.setInterval() pour actualiser un div en JavaScript

Trouver une convention de codage sur une ligne pour recharger un élément div en JavaScript est difficile. La manière générale de recharger ou d’actualiser consiste à régler la fonction onload ou à déclencher la page Web entière.

Cela n’est pas toujours préférable si la page Web est volumineuse ; plus probablement, nous voulons une manière agile de rafraîchir certaines sections.

Pour résoudre ce problème, nous dépendrons uniquement de la fonction jQuery .load() qui prend le chemin actuel de la page Web et ajoute l’identifiant de la div. C’est pour s’assurer que nous ajouterons spécifiquement le id pour représenter l’emplacement du div dans le contenu de notre page Web et que nous l’actualiserons.

Une autre méthode que nous suivrons consiste à suivre le délai après lequel nous souhaitons rafraîchir la div. Dans ce cas, nous aurons besoin d’un simple attribut dynamique en HTML pour collaborer avec la limite de temps définie par l’utilisateur.

Cela peut ne pas sembler aussi dédié que .load() de jQuery, mais il peut être relativement facile à gérer via JavaScript. Passons aux blocs de code.

Utilisez window.location.href dans .load() pour recharger un div en JavaScript

Le segment le plus important dans cet exemple est l’attribut id qui prendrait l’instance div ciblée. Nous chargerons cette partie de la page Web avec le div et non la totalité.

Au départ, nous aurons un div avec une balise span pour calculer le délai (pour vérifier si cela fonctionne bien). Plus tard nous prendrons une instance de div (#here) pour utiliser la fonction load().

Dans la fonction .load(), notre paramètre serait le window.location.href, qui fait référence au chemin du site Web actuel. Et associé au #here id va allouer la destination et la rafraichir.

Extrait de code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
   <div id="here">dynamic content <span id='off'>9</span></div>
   <div>ABC</div>
</div>
<script>
   $(document).ready(function(){
       var counter = 9;
   window.setInterval(function(){
    counter = counter - 3;
     if(counter>=0){
       document.getElementById('off').innerHTML=counter;
     }
     if (counter===0){
       counter=9;
     }
     $("#here").load(window.location.href + " #here" );
   }, 3000);
   });
</script>

Production:

Ici, notre compteur est changé toutes les 3 secondes. En raison de la capture d’écran, le rapport de synchronisation peut être d’au moins 3 secondes, mais cela implique que le processus fonctionne.

Utilisez " #id > *" avec .load() pour recharger un div en JavaScript

Dans cette section nous utiliserons à nouveau la fonction .load() et cette fois comme paramètre nous passerons " #here > *". Pensez à ajouter un espace avant d’indiquer le #id.

Cette section globale fonctionnera comme l’autre exemple expliqué.

Extrait de code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
   <div id="here"> again dynamic content <span id='off'>3</span></div>
   <div>ABC</div>
</div>
<script>
   $(document).ready(function(){
       var counter = 3;
   window.setInterval(function(){
    counter--;
     if(counter>=0){
       document.getElementById('off').innerHTML=counter;
     }
     if (counter===0){
       counter=3;
     }
   $("#here").load(" #here > *");
   }, 1000);
   });
</script>

Production:

Utilisez window.setInterval() pour actualiser un div en JavaScript

Ici, nous allons prendre un div et définir son attribut id. Dans la section script, nous rendrons notre horloge de comptage active.

Cet exemple peut être un bon exemple où nous avons un tableau de contenu à afficher sur la page Web après un certain nombre de fois. Soi-disant, nous avons plusieurs div à présenter, et après chaque compte à rebours complet, nous changerons l’index du tableau.

Ainsi, nous aurons une manière dynamique de traiter de nombreux contenus.

Dans l’exemple ci-dessous, nous n’avons pas récupéré de telles données de tableau. Au lieu de cela, nous venons de lancer le cycle d’horloge. Vérifions la barrière de code pour un meilleur aperçu.

<div>
    The DIV below will refresh after <span id="cnt" style="color:red;">7</span> Seconds
</div>
</body>
<script>
var counter = 7;
    window.setInterval(function () {
        counter--;
        if (counter >= 0) {
            var span;
            span = document.getElementById("cnt");
            span.innerHTML = counter;
        }
        if (counter === 0) {
            counter = 7;
        }

    }, 1000);
  </script>

Production: