'Displaying specific values from last entered row in database in real time without refreshing the webpage

I tried to retrieve the temperature value from the last entered row in my database and change it when there is another row that has been added without refreshing the webpage. So far the temperature.php file didn't have any problem, but my index.html cannot fetch the temperature.php using the jQuery.

temperature.php code:

<?php

header('Content-Type: application/json');

$conn = mysqli_connect('localhost', 'root', '', 'mlxdb');
$sql = mysqli_query($conn, "SELECT * FROM `mlx` ORDER BY `mlx`.`ID` DESC LIMIT 1");

$print_data = mysqli_fetch_row($sql);

$data = [
    'studentTemp' => $print_data[1],
];

echo json_encode($data);
?>

This is the result of my temperature.php file

index.html code:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1>Temperature</h1>
    <p>
      <strong id="studentTemp">0</strong>
    </p>
    <script>
      function startLiveUpdate() {
        const textTemperature = document.getElementById("studentTemp");

        setInterval(function () {
          fetch("temperature.php")
            .then(function (response) {
              return response.json();
            })
            .then(function (data) {
              textTemperature.textContent = data.studentTemp;
            })
            .catch(function (error) {
              console.log(error);
            });
        }, 1000);
      }

      document.addEventListener("DOMContentLoader", function () {
        startLiveUpdate();
      });
    </script>
  </body>
</html>

This is the result the I got from my index.html file

I hope someone can help me solve this problem.

phphtmljquery


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions