Sam Sam - 3 years ago 184
PHP Question

How to update an HTML table content without refreshing the page?

I have an HTML table that is fetching some data from the database and also a button for deleting selected records .

The table looks like that:

name phone links
john 6562 link1
jim 7682 link1
... ... ....

The code is something like that :

<form method="post" action="#">
<th><input type="checkbox"></th>
<th scope="col">Name</th>
<th scope="col">Phone</th>
<th scope="col">Links</th>
echo "<tr>";
echo "<th><input type='checkbox'></th>";
echo "<th>".$row['name']."</th>";
echo "<td>".$row['phone']."</td>";
echo "<td>";
echo '<a href=""></a><br/>';
echo "</td>";
echo "</tr>";
<input type="submit" value="Delete Selected" name="delete"/>

Now when I delete any record of the table and the database , I have to refresh the page to see that it's deleted .
What I want is when I click the delete button , The record is deleted and the table is updated with a successful message at the top of the page, Is that possible ?

Answer Source

in html

<tbody id="table-body">
    <?php include 'tableBody.php';?>

in your button function

$.get("tableBody.php", function(data) {

When the button function is trigger, it will fire up the AJAX GET request to the tableBody.php, and then use its content to update the <tbody> with id table-body.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download