Rafraîchir une page de site

cesanjjaque Messages postés 2 Date d'inscription samedi 20 juillet 2024 Statut Membre Dernière intervention 20 juillet 2024 - 20 juil. 2024 à 08:03
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 21 juil. 2024 à 10:10

Bonjour,
Depuis 3 ans environ j'ai créé (gratuitement) un petit site pour une association d'aide alimentaire. Ce mini site de quelques pages est destiné à être affiché sur des grands écrans en mode kiosk et donne les disponibilités du jour sous forme de listes (par exemple: fruits, légumes, surgelés, viennoiseries ...) . Les listes sont mises à jour par les bénévoles via un tableur Excel et une macro qui modifie directement le code HTML.
La mise à jour des écrans ne peut pas bien sûr se faire avec CTRL+F5 et doit se faire automatiquement. J'ai essayé pas mal de solutions pour réaliser cela de la balise "méta refresh" au code JavaScript mais aucune ne me satisfait pleinement. Actuellement j'utilise du code JavaScript qui rafraîchi séquentiellement les frames correspondant aux  listes. Cela fonctionne "à peu près" cet à dire que parfois une liste se met vide et il faut attendre (30 sec. environ) la séquence suivante pour la retrouver sur l'écran, ce n'est pas systématique et sûrement lié aux activités du réseau local (wifi). Le paradoxe c'est qu'en réalité, il ne suffirait de rafraîchir que 2 ou 3 fois par jour.
Il semble que ce ne soit pas possible d'envoyer un code HTML qui dise "maintenant j'ai besoin que tu rafraichisse la page, l'objet ou la frame et après tu attendras que je te le dise à nouveau".
Si vous avez des idées pour faire cela de façon "fiable" je suis preneur.
Cordialement. CC


Android / Firefox 128.0

3 réponses

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié le 21 juil. 2024 à 10:58

Salut

voila un petit exemple d AJAX  avec js  jQuery

ne voyant pas ton code , je suppose que tes pages objet sont toute structuré de la même manière ?

donc j ai fais 4 pages structuré identiquement ! objet1.html .objet2.html..ect

Dans cet exemple tes "tableaux" sont inséré dans une <div id="objet"> puis dans un paragraphe <p class="tableau">

bien sur sur les autres pages le titre change objet 2 ,objet 3 ect... mais cela n a pas d importance !

<!DOCTYPE html>
<html>
  <head>
    <title>
      objet 1
    </title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="objet">
      <p class="tableau"> TON TABLEAU EST ICI DANS UN PARAGRAPHE<br>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod
        non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
        pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede
      </p>
    </div>
  </body>

Ensuite sur ta page "index.html" dans mon exemple  ou tu veux  diffuser ces tableaux  tu le fait de cette façon

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>load demo</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body>
    <div id="objet1"></div>
    <div id="objet2"></div>
    <div id="objet3"></div>
    <div id="objet4"></div>
    <script>
      $("#objet1").load("objet1.html #objet p.tableau");
      $("#objet2").load("objet2.html #objet p.tableau");
      $("#objet3").load("objet3.html #objet p.tableau");
      $("#objet4").load("objet4.html #objet p.tableau");
    </script>
  </body>
</html>

 tu lie ta page a la librairie JQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 

tes "tableau" apparaîtront  dans les div désignée

pour le 1

 $("#objet1").load("objet1.html #objet p.tableau");

#objet1 désigne la div de destination sur ta page index.html

load("objet1.html #objet p.tableau" va chercher le contenu a afficher ! ici il va chercher le paragraphe <p class="tableau"> inclus dans la <div id="objet"> de la page objet1.html 

de cette manière pas besoin de tes meta dans les page objet c est toujours la dernière version qui est charge  

Download les fichiers 

PS: Cela ne fonctionne pas en local !!! il faut qu il soit sur ton serveur pas sur ton pc a moins que tu utilise un serveur local type XAMPP ou EASYPHP sur ton pc

tu peut faire un reload mais franchement je vois pas trop l intérêt sauf si tes visiteurs reste des heures sur ton site ! sinon voila toute les 2 minutes avec une alerte 

  $(document).ready(function () { 
      setTimeout(function () { 
        alert('Recharger la Page'); 
        location.reload(true); 
      }, 120000); 
    }); 

ou avec un bouton !

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>
    </title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          location.reload(true);
        });
      });
    </script>
  </head>
  <body>
        <button type="button">
            Bouton Pour Recharger la Page
        </button>
  </body>
</html>

A+



2