reload php generated table without page refresh

Question

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

Your last statement is not clear at all. If you need to update a table without reloading you need to use AJAX. jQuery does Ajax well — mplungjan
– mplungjan, Commented Feb 11, 2018 at 21:30
@mplungjan can you tell me a bit more on how i should do this? i have never used ajax and i dont know what to look for. — Kelvin Wijkniet
– Kelvin Wijkniet, Commented Feb 11, 2018 at 21:53

Kevin Pimentel · Accepted Answer · 2018-02-11 22:48:09Z

1

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.

answered Feb 11, 2018 at 22:48

Kevin Pimentel

1,9163 gold badges24 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Pimentel Over a year ago

Were you able to figure this out?

Kelvin Wijkniet Over a year ago

yes. i did edit your post a bit but i got it to work. thanks again!

Collectives™ on Stack Overflow

reload php generated table without page refresh

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related