Question posted in
You can find the official documentation here.

jquery ajax adds mysql rows at the end of the table-repeating

I populate a table from mysql table datas with ajax jquery to refresh it’s contents at a time intervall.
I set the time at 1 second.
The html keeps repeating the table at the end of the existing table.

Here is the php file that creates the json data succesfully.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "esp_data";
$conn = new mysqli($servername,$username,$password,$dbname);
$myArray = array();
if ($result = $conn->query("SELECT * FROM sensordata")) {
    while($row = $result->fetch_array(MYSQLI_ASSOC)) {
            $myArray[] = $row;
    }
    echo json_encode($myArray);
}
$result->close();
$conn->close();
?>

Here is the main index file

< !DOCTYPE html >
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script >
        var $myTable = $('#myTable')
       $(document).ready(function(){
          function getData() {
            var row = '';
            $.ajax({
              type: 'POST',
              url: 'data.php',
              dataType: 'json',
              success: function (data) {
                $.each(data, function (i, item) {
                  var row = $('<tr>');
                  row.append('<td>' + item.value1 + '</td>');
                  row.append('<td>' + item.value2 + '</td>');
                  row.append('<td>' + item.Driver + '</td>');
                  $('#myTable').append(row);
                });
              }
            });
          }
        getData();
        setInterval(function () {
          getData();
        }, 1000);  // it will refresh your data every 1 sec
       });
</script>
      <body>
        <div>
          <table id="myTable">
            <tr>
              <th>Lap</th>
              <th>Time</th>
              <th>Driver</th>
            </tr>
          </table>
        </div>
      </body>
</html>

Generated json data:

[
  {
    "id": "1",
    "value1": "144",
    "value2": "00:01:125",
    "Driver": ""
  },
  {
    "id": "2",
    "value1": "144",
    "value2": "00:01:125",
    "Driver": ""
  },
  {
    "id": "9",
    "value1": "11",
    "value2": "00:01:125",
    "Driver": ""
  },
  {
    "id": "10",
    "value1": "12",
    "value2": "00:00:827",
    "Driver": ""
  }
]

Does anyone have any idea why is this happening and how can i fix it?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
     ...

  $('#myTable').html('')   //here
  $.each( data, function(i,item ) {
      var row=$('<tr>');
    ...

    This is working ok Thanks a lot.


  2. 0

    you’re appending the new row at the end of each call with $('#myTable').append(row) without removing the old rows.

    you can set it empty at the beginning of each call as in;

    ...
$.each( data, function(i,item ) {
    $('#myTable').html('')   //here
    var row=$('<tr>');
    ...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search