How can I update a table using jquery ajax?
I have a table below. With the ajax call, I am updating the table content. It is reflected in the database, but how can I update the table without reloading the entire page. Please help me.
My table structure:
<table class="table table-hover" id="cust-table">
<thead>
<tr>
<th>LastName</th>
<th>FirstName</th>
</tr>
</thead>
<tbody>
<?php
for($i=0; $i<$numrows; ++$i) {
$contacts = mysqli_fetch_assoc($result);
?>
<tr>
<td><?php echo $contacts['LastName']; ?></td>
<td><?php echo $contacts['FirstName']; ?></td>
</tr>
<?php
} ?>
</tbody>
</table>
JQuery code:
$.ajax({
type: 'POST',
url: 'update.php',
data: {LastName:last_name, FirstName:first_name}
});
update.php updates the database, but I need to update the table without refreshing the whole page. Can someone please help me on this?
+3
source to share
2 answers
For your scenario, write the code for the html and ajax table in other pages. For example: -
In update.php
//do stuff for update
//html table code
------------------------
On the ajax page (test.php)
<div id='load'>
</div>
<script>
$(function(){
loadData();
// call by click event
$('#selector-name').click(function(){
loadData();
});
function loadData(){
$.ajax({
type: 'POST',
url: 'update.php',
data: {LastName:last_name, FirstName:first_name},
success: function(msg) {
$("#load").html(msg);
},
});
}
});
</script>
+2
source to share