Sam Sam - 1 year ago 134
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
link2
link3
________________
jim 7682 link1
________________
... ... ....


The code is something like that :

<form method="post" action="#">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th scope="col">Name</th>
<th scope="col">Phone</th>
<th scope="col">Links</th>
</tr>
</thead>
<tbody>
<?php
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>";
?>
</table>
<input type="submit" value="Delete Selected" name="delete"/>
</form>


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 ?

TNU TNU
Answer Source

in html

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

in your button function

$.get("tableBody.php", function(data) {
    $("#table-body").html(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