When I delete a record from the first row of the table, the confirmation modal shows, and upon confirming the deletion, the record is successfully deleted, and the table is updated using Livewire. dispatch('refreshTable').
However, when I delete another record in the first row of the updated table (the correct data-url for the record is set), the actionUrl is incorrectly referencing the previously deleted record, triggering an error that the record has already been deleted (the ID of the first deleted record).
But when I try to delete a record in the second row of the table, the actionUrl is updated correctly, and the deletion is successful. The table is then updated again.
When I try to delete another record, either in the first or second row, the actionUrl is not updated correctly, meaning it’s still referencing the actionUrl from the previously deleted records (the first and second deleted records).
How can I resolve this?
Here’s the code:
<script>
document.addEventListener('livewire:initialized', function () {
jQuery(document).ready(function() {
if (!window.confirmationModalInitialized) {
window.confirmationModalInitialized = true;
const confirmationModal = new bootstrap.Modal($('#confirmationModal'));
$(document).on('click', '.action-confirm', function (event) {
event.preventDefault();
var actionUrl = $(this).data('url');
var actionMethod = $(this).data('method');
var confirmationMessage = $(this).data('message');
console.log('URL de ação:', actionUrl);
$('#confirmationMessage').text(confirmationMessage);
confirmationModal.show();
$('#confirmForm').off('submit').on('submit', function (e) {
e.preventDefault();
fetch(actionUrl, {
method: actionMethod,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
'Accept': 'application/json',
},
})
.then(async (response) => {
const data = await response.json();
if (!response.ok) throw new Error(data.message);
return data;
})
.then((data) => {
confirmationModal.hide();
Livewire.dispatch('showToast', {
title: data.success ? 'Sucesso' : 'Erro',
message: data.message,
color: data.success ? 'success' : 'danger',
icon: data.success ? 'bi-check-circle' : 'bi-exclamation-circle',
});
if (data.success) {
actionUrl = '';
Livewire.dispatch(data.dispatch || 'refreshTable');
}
})
.catch((error) => {
confirmationModal.hide();
Livewire.dispatch('showToast', {
title: 'Erro',
message: error.message,
color: 'danger',
icon: 'bi-exclamation-circle',
});
});
});
});
}
});
});
</script>
And the code of link Delete:
<a class="dropdown-item text-danger action-confirm" href="#" data-url="http://app.test/admin/bid/boletim/81" data-method="DELETE" data-message="Tem certeza que deseja excluir o registro?"><!--[if BLOCK]><![endif]--><i class="fa-solid fa-trash-alt me-2"></i><!--[if ENDBLOCK]><![endif]-->Delete</a>
Open for other suggestions! Thanks!