127 lines
4.6 KiB
JavaScript
127 lines
4.6 KiB
JavaScript
// Modal Handlers for Bootstrap
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Handle delete button clicks
|
|
const deleteButtons = document.querySelectorAll('[data-bs-toggle="deleteModal"]');
|
|
|
|
deleteButtons.forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const targetModal = this.getAttribute('data-bs-target');
|
|
const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
|
|
|
|
// Set up the delete form and message
|
|
const deleteUrl = this.getAttribute('data-delete-url');
|
|
const itemName = this.getAttribute('data-item-name') || 'this item';
|
|
|
|
const deleteForm = document.getElementById('deleteForm');
|
|
deleteForm.setAttribute('action', deleteUrl);
|
|
|
|
const modalMessage = document.getElementById('deleteModalMessage');
|
|
modalMessage.textContent = `Are you sure you want to delete "${itemName}"? This action cannot be undone.`;
|
|
|
|
modal.show();
|
|
});
|
|
});
|
|
|
|
// Handle update button clicks for inline editing
|
|
const updateButtons = document.querySelectorAll('[data-bs-toggle="updateModal"]');
|
|
|
|
updateButtons.forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const targetModal = this.getAttribute('data-bs-target');
|
|
const modal = new bootstrap.Modal(document.getElementById('updateModal'));
|
|
|
|
// Load the form content via AJAX
|
|
const updateUrl = this.getAttribute('data-update-url');
|
|
|
|
fetch(updateUrl)
|
|
.then(response => response.text())
|
|
.then(html => {
|
|
const modalBody = document.querySelector('#updateModal .modal-body');
|
|
modalBody.innerHTML = html;
|
|
|
|
// Re-initialize any form validation or JavaScript within the modal
|
|
initializeModalForms();
|
|
|
|
modal.show();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading form:', error);
|
|
alert('Error loading the form. Please try again.');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
// Initialize forms within modals
|
|
function initializeModalForms() {
|
|
// Handle form submissions within modals
|
|
const modalForms = document.querySelectorAll('#updateModal form');
|
|
|
|
modalForms.forEach(form => {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const submitUrl = this.getAttribute('action');
|
|
|
|
fetch(submitUrl, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': formData.get('csrfmiddlewaretoken')
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Close the modal and refresh the page or update the content
|
|
bootstrap.Modal.getInstance(document.getElementById('updateModal')).hide();
|
|
|
|
// Reload the page or update the specific element
|
|
if (data.reload) {
|
|
window.location.reload();
|
|
} else if (data.update_element) {
|
|
// Update specific element if needed
|
|
console.log('Element updated:', data.update_element);
|
|
}
|
|
} else {
|
|
// Show errors in the form
|
|
displayFormErrors(form, data.errors);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error submitting form:', error);
|
|
alert('Error submitting the form. Please try again.');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Display form errors
|
|
function displayFormErrors(form, errors) {
|
|
// Remove existing error messages
|
|
const existingErrors = form.querySelectorAll('.alert-danger');
|
|
existingErrors.forEach(error => error.remove());
|
|
|
|
// Add error messages
|
|
if (errors && Object.keys(errors).length > 0) {
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'alert alert-danger';
|
|
errorDiv.innerHTML = '<strong>Please correct the following errors:</strong><ul>';
|
|
|
|
for (const [field, messages] of Object.entries(errors)) {
|
|
messages.forEach(message => {
|
|
errorDiv.innerHTML += `<li>${field}: ${message}</li>`;
|
|
});
|
|
}
|
|
|
|
errorDiv.innerHTML += '</ul>';
|
|
form.insertBefore(errorDiv, form.firstChild);
|
|
}
|
|
}
|