Why is it that every time I add new data to the database using an AJAX request, I can’t click the button to open the modal for view and update, and an error appears in the console
I should be able to view or edit the newly added data using AJAX but its not working
$.ajax({
url: “{{ route(‘admin.store_violation’) }}”,
method: ‘POST’,
data: formData,
success: function(response) {
if(response.status == ‘success’) {
$(‘#violationFormAdmin’)[0].reset();
$('#violationTable').load(location.href + ' #violationTable', function() {
$('.viewModal').on('click', function() {
let id = $(this).data('id'); // Get the violation ID from the data attribute
let targetModal = $(this).data('bs-target'); // Get the target modal ID
$(targetModal).find('.modal-body').html('Violation ID: ' + id);
// Check if modal instance exists and dispose of it
let modalInstance = bootstrap.Modal.getInstance(document.querySelector(targetModal));
if (modalInstance) {
modalInstance.dispose();
}
$('.modal').modal({
backdrop: 'static',
keyboard: true
});
$(targetModal).modal('show');
console.log("View violation with ID: " + id);
});
$('.editModal').on('click', function() {
let id = $(this).data('id');
let targetModal = $(this).data('bs-target');
$(targetModal).find('.modal-body').html('Edit Violation ID: ' + id);
// Check if modal instance exists and dispose of it
let modalInstance = bootstrap.Modal.getInstance(document.querySelector(targetModal));
if (modalInstance) {
modalInstance.dispose();
}
$('.modal').modal({
backdrop: 'static', // Reset backdrop functionality
keyboard: true // Allow closing the modal using the keyboard (Esc)
});
$(targetModal).modal('show');
console.log("Edit violation with ID: " + id); // This log shows the violation ID
});
});
Swal.fire({
toast: true,
position: 'top-right',
iconColor: 'white',
customClass: {
popup: 'colored-toast',
},
showConfirmButton: false,
timer: 2500,
timerProgressBar: true,
icon: 'success',
title: 'Violation added successfully',
});
}
},