Good morning, first of all sorry if I don't ask the question correctly, I'm new and I'm adapting to the community
Currently I have a js-ajax code that, through post, consults me some items to show them in a datable
function fetchItems() {
$.ajax({
url: 'item-list.php',
type: 'GET',
success: function(response) {
const project = JSON.parse(response);
let template = '';
project.forEach(project => {
template += `
<tr Id="${project.id}">
<td>${project.fecha}</td>
<td><strong>${project.titulo}</strong></td>
<td>${project.estado}</td>
<td>${project.prioridad}</td>
<td>${project.fechaprevista}</td>
<td>
<button type="button" class="btn btn-info btn-sm" Onclick="ShowInfo(${project.id})">Info</button>
<button type="button" class="btn btn-success btn-sm" onClick="ShowHis(${project.id})">Añadir seguimiento</button>
<button type="button" class="btn btn-danger btn-sm" onClick="Edit(${project.id})"><i class="fa fa-pencil"></i></button>
</td>
</tr>
`
});
$('#list-modulos').html(template);
}
then these items are displayed in the html with the following code
<table id="hiddenrow_desc" class="table table-bordered table-hover display">
<thead>
<tr><th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody id="list-modulos">
</tbody>
</table>
The first call to the fechtask function is correct and is displayed fine, the second and subsequent calls either give an error or the table is not capable of loading, I understand that there must be some method to empty the table and reload it but I do not know
Try This : I added $('#list-modulos').empty(); line after success to make body empty.
function fetchItems() {
$.ajax({
url: 'item-list.php',
type: 'GET',
success: function(response) {
$('#list-modulos').empty();
const project = JSON.parse(response);
let template = '';
project.forEach(project => {
template += `
<tr Id="${project.id}">
<td>${project.fecha}</td>
<td><strong>${project.titulo}</strong></td>
<td>${project.estado}</td>
<td>${project.prioridad}</td>
<td>${project.fechaprevista}</td>
<td>
<button type="button" class="btn btn-info btn-sm" Onclick="ShowInfo(${project.id})">Info</button>
<button type="button" class="btn btn-success btn-sm" onClick="ShowHis(${project.id})">Añadir seguimiento</button>
<button type="button" class="btn btn-danger btn-sm" onClick="Edit(${project.id})"><i class="fa fa-pencil"></i></button>
</td>
</tr>
`
});
$('#list-modulos').html(template);
}