procurei em diversos lugares, inclusive na documentação do jQuery e não achei uma solução. Preciso de uma luz do que fazer nessa ocasião. Peço desculpas se não ficar muito claro, nunca fui muito de participar de fórum e de pedir ajuda nessa parte de programação.
O sistema é MVC. Eu realizo a listagem fazendo o load()
de uma página html na minha <div class="conteudo">
, e dentro desse html externo, possui um <table>
e um <script>
da listagem desses dados.
Isso funciona normalmente, listando os dados em seus devidos lugares na tabela, porém, quando eu faço um DELETE na tabela, ele retorna no .done()
, um load()
novamente nessa minha div
com a página de listagem (html externo), e o pulo do gato está ai, ele lista os dados após o DELETE, duplicados.
Quando eu aperto o botão "Alunos cadastrados" ele listará os dados com o html importado
Ao clicar na lixeira (Deletado o id
=4), ele deleta o registro e faz a importação do html novamente para listar a nova tabela, porém com dados repetidos
Se precisar, aqui está o código html
externo que estou importando para dentro da minha página:
<table class="table table-hover table-responsive-sm display compact cell-border" id="alunos" style="width: 100%;">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Nome</th>
<th scope="col">RM</th>
<th scope="col">Celular</th>
<th scope="col">OP</th>
</tr>
</thead>
</table>
<script src="src/alunos/controller/list-alunos.js"></script>
<script src="src/alunos/controller/delete-aluno.js"></script>
O delete-aluno.js
que realiza o DELETE:
$(document).ready(() => {
$('.conteudo').on('click', '.btn-delete-aluno', function() {
$.ajax({
url: 'src/alunos/model/delete-aluno.php',
data: `id_aluno=${$(this).attr('id')}`,
dataType: 'json',
type: 'POST'
}).done((retorno) => {
$(".conteudo").load('src/alunos/view/list-alunos.html')
})
})
})
E o list-aluno.js
que faz a listagem, não sei se será necessário consultar esse script:
$(document).ready(() => {
$(document).empty()
$.ajax({
url: 'src/alunos/model/list-alunos',
dataType: 'json'
}).done((retorno) => {
for (const dado of retorno) {
$("#alunos").append(
`
<tr role="row">
<td>${dado.id_aluno}</td>
<td>${dado.nome}</td>
<td>${dado.rm}</td>
<td>${dado.celular}</td>
<td>
<button class="btn-delete-aluno" id="${dado.id_aluno}">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
`
)
}
})
})