Forum d'entraide PHPFrance

Bonjour,
Pour une expo, j'ai créé une page internet qui va afficher selon une base de données des informations diverses.
Cette base de données évolue grâce à des ventes qui auront lieu sur place.
La page php que j'ai créé se connecte donc a la base de données et affiche certaines informations.
Afin d'avoir une grande réactivité dans l'affichage ,j'ai ajouté une balise meta qui actualise toutes les 1s.

Mais si ça fonctionne parfaitement,le visuel n'est pas top : en effet comme la page est réactualisée toutes les secondes le texte se recharge ce qui donne un effet de grésillement très désagréable .
Je galère et je cherche donc du côté de JavaScript une fonction qui se déclencherait en boucle toutes les 1 secondes et qui déclencherait l'actualisation de la page uniquement si le nombre de ligne de ma bdd est différent du dernier mémorisé par java.
Est ce possible ? Ou d'une autre manière bien sûr

Merci d'avance

oui, avec de l'ajax
par exemple https://api.jquery.com/jquery.get/ à combiner avec setTimeout

Merci pour la réponse rapide.
Arff je ne maîtrise pas du tout ajax mince.
J'ai pas vu exactement comment accéder à une base SQL avec Ajax pour compter les lignes

Voici un exemple pour rafraîchir automatiquement les données toutes les secondes en utilisant setInterval avec $.get de jQuery :

<!-- Inclure la bibliothèque jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Élément HTML pour afficher les données récupérées -->
<div id="conteneur-donnees"></div>

<script>
  // Fonction pour récupérer les données et mettre à jour le conteneur-donnees
  function recupererDonneesEtMettreAJour() {
    $.get('ton_URL_de_donnees', function(donnees) {
      // En supposant que le serveur renvoie des données, mettez à jour le conteneur-donnees avec les nouvelles données
      $('#conteneur-donnees').html(donnees);
    });
  }

  // Récupérer les données toutes les secondes en utilisant setInterval
  setInterval(recupererDonneesEtMettreAJour, 1000);
</script>

Merci pour votre réponse !
Depuis j'ai testé une solution qui m'a été proposée par ChatGPT (oui j'ai honte ^^)
le script qu'il me fournit fonctionne parfaitement :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
<script>
  // Variable globale pour stocker le nombre de lignes précédent
  var ancienNombreDeLignes = 0;
    // Variable globale pour indiquer si la page a déjà été rechargée
  var pageDejaRechargee = false;

  // Fonction pour effectuer la requête Ajax et vérifier si le nombre de lignes a changé
  function verifierChangementLignes() {
    fetch('verifier_lignes.php')
      .then(response => response.json())
      .then(data => {
		  console.log('Contenu JSON reçu :', data);
        var nombreDeLignes = parseInt(data.total); // Convertir la chaîne en nombre entier
        console.log('Nombre de lignes : ' + nombreDeLignes);

        // Vérifier si le nombre de lignes a changé depuis la dernière requête
        if (nombreDeLignes !== ancienNombreDeLignes) {
			
          // Recharger la page pour afficher les nouvelles données
          if (!pageDejaRechargee) {
            location.reload();
            pageDejaRechargee = true;
          }
        } else {
          // Mettre à jour le nombre de lignes précédent pour la prochaine comparaison
          ancienNombreDeLignes = nombreDeLignes;
          // Réinitialiser la variable indiquant que la page a été rechargée
          pageDejaRechargee = false;
        }
      })
      .catch(error => {
        console.error('Erreur Fetch :', error);
      })
      .finally(() => {
        // Appeler à nouveau la fonction toutes les 2 secondes (2000 ms)
        setTimeout(verifierChangementLignes, 2000);
      });
  }

  // Démarrer la fonction pour la première fois
  verifierChangementLignes();
</script>

Associé au fichier verifier_lignes.php :

<?php
// Code pour établir la connexion à la base de données
$servername = "****";
$username = "****";
$password = "****";
$dbname = "***";

// Créer une connexion
$conn = new mysqli($servername, $username, $password, $dbname);

// Vérifier la connexion
if ($conn->connect_error) {
    die("Connexion échouée: " . $conn->connect_error);
}

// Requête SQL pour compter le nombre de lignes dans la table
$sql = "SELECT COUNT(*) as total FROM etat_vente";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // Récupérer le nombre de lignes
    $row = $result->fetch_assoc();
    $nombreDeLignes = $row['total'];

    // Créer un tableau associatif pour la réponse JSON
    $response = array('total' => $nombreDeLignes);

    // Renvoyer la réponse au format JSON
    header('Content-Type: application/json');
    echo json_encode($response);
} else {
    // En cas d'erreur ou de résultat vide, renvoyer un message d'erreur
    $response = array('error' => 'Erreur lors de la récupération du nombre de lignes.');
    header('Content-Type: application/json');
    echo json_encode($response);
}

// Fermer la connexion à la base de données
$conn->close();
?>

Le problème c'est que si le script vérifie bien toutes les 2 secondes qu'une ligne a été créé, dès lors qu'il y en a au moins 1, le navigateur s'affole et la page se recharche en boucle par intervalle ultra court, telle une mitraillette, on doit être autour de 100 ms ce qui aboutit a un ban de OVH (vive les vpn et ip dynamiques ^^)....

Et je ne comprend absolument pas pourquoi...
j'ai essayé d'isoler le script seul et la page php cela fait la même chose. ChatGPT m'a proposé X modifications d'où les rajouts du style

    if (!pageDejaRechargee) {

mais en vain, le script fonctionne en soit mais s'emballe.

Si tu lui explique pas bien ta situation, il te donnera des exemples qui ne te conviendront pas.

Oui j'ai essayé plusieurs choses mais cela m'amène toujours au même problème de reload en boucle.
Ta solution two3d j'ai pas réussi à comprendre comment je pouvais aller chercher danz une table ou récupérer un Json d'un autre fichier qui récupère la quantité de ligne.
J'ai trouvé une solution alternative mais qui fonctionne précisément dans mon cas c'est le BroadcastChannel.
En effet ma page 2 doit être mise a jour quand ma table est modifiée ,mais elle est modifiee par la page 1.
Vu que que j'ai conçu l'usage des 2 pages de manière à les afficher sur 2 écrans , 1 onglet (page 1 ou 2) par écran cela fonctionne.

tous les exemples de https://api.jquery.com/jquery.get/ ont été mis en œuvre avec succès ?

Ta solution two3d j'ai pas réussi à comprendre comment je pouvais aller chercher danz une table ou récupérer un Json d'un autre fichier qui récupère la quantité de ligne.

La page php que j'ai créé se connecte donc a la base de données et affiche certaines informations.

Dans mon code, à la place de "ton_URL_de_donnees" tu met le lien vers ta page .php