CODEWITHSUNDEEP
phpjqueryhtml
Kelvin Wijkniet
Kelvin Wijkniet

Reputation: 11

reload php generated table without page refresh

I'm making a table in HTML which gets generated via PHP code:

<table class="table table-hover">
  <thead>
    <tr>
      <td>#</td>
      <td>name</td>
      <td>specie</td>
      <td>client</td>
      <td>status</td>
      <td>action</td>
    </tr>
  </thead>
  <body>
    <?php
      foreach($sortedPatients as $patient){
        echo "<tr><td>" . $patient['patient_id'] . "</td><td>" . $patient['patient_name'] . "</td>";
        foreach($species as $specie){
          if($specie['species_id'] == $patient['species_id']){
            echo "<td>" . $specie['species_description'] . "</td>";
          }
        }
        foreach($clients as $client){
          if($client['client_id'] == $patient['client_id']){
            echo "<td>" . $client['client_firstname'] . $client['client_lastname'] . "</td>";
          }
        }
        echo "<td>" . $patient['patient_status'] . "</td><td><i class='glyphicon glyphicon-pencil icon'></i><i class='glyphicon glyphicon-trash icon'></i></td></tr>";
      }
    ?>
  </body>
</table>

This completely works but now I change the data ($sortedPatients) and the table won't change. Is there a way to update this table so it will show the new data?

I tried using jQuery to load the table from a different file and use JavaScript setInterval to do this every second. But then it didn't want to receive the data in the sub file that was loaded in the main file

Upvotes: 1

Views: 1174

Answers (1)

Kevin Pimentel
Kevin Pimentel

Reputation: 1916

The answer here is that there is no way for you to refresh the page using PHP without reloading the page. You will need to use JavaScript or one of it's frameworks to manipulate the DOM. JQuery is an OK way of accomplishing this.

You can do something like this: 

$.ajax({
  type: "POST",
  url: "yourscript.php",
  data: params,
  success: function(response) {
    // Do stuff with the JSON data to update your table.
    // Since you don't have classes / ids in your html rows or columns,
    // You can do something like $('tbody').html(""); to clear all of 
    // tBody children and then rebuild your table in JavaScript.
    // This is messy and there are better ways of handling this.
  },
  error: function(errors) {
    console.log(errors);
  }
});

Another thing you could do is learn a Data Model Binding JS framework like Vue, Knockout, React, or Angular. For something simple like what you are trying to accomplish Vue would be the fastest and easiest to learn.

Take a look at these examples weblesson and itsolutionstuff.

Upvotes: 1

Related Questions