Hi,
Can you explain why my refresh div does not work? When clicked submit it seems the div is trying to refresh by removing all rows data but it is then not returning anything which leaves the div blank instead. The data stored to DB fine but I need the div to refresh and show all new submitted data
$('#submitBtm').on('click', onSubmit = () => {
const first_nameV = document.getElementById("first_name").value;
const last_nameV = document.getElementById("last_name").value;
const emailV = document.getElementById("email").value;
const departmentV = document.getElementById("department").value;
$.ajax({
type: "POST",
url: `companydirectory/libs/php/insertAll.php?first_name=${first_nameV}&last_name=${last_nameV}&email=${emailV}&departmentID=${departmentV}`,
success: function(data) {
},
error: function(request,error) {
console.log(request)
}
})
$("#id_data").load(location.href + " #id_data");
event.preventDefault();
})
on HTML page
<div class="listTable">
<tbody id="id_data">
</tbody>
</div>
It doesn't update because you're not appending the new data that you receive on the success callback
$.ajax({
type: "POST",
url: `companydirectory/libs/php/insertAll.php?first_name=${first_nameV}&last_name=${last_nameV}&email=${emailV}&departmentID=${departmentV}`,
success: function(data) {
// here you have the data and you can refresh the table
},
error: function(request,error) {
console.log(request)
}
})