itflow/js/ajax_modal.js

62 lines
1.7 KiB
JavaScript

// Ajax Modal Load Script
$(document).on('click', '.ajax-modal', function (e) {
e.preventDefault();
const $trigger = $(this);
// Prefer data-modal-url, fallback to href
let modalUrl = $trigger.data('modal-url') || $trigger.attr('href') || '#';
const modalSize = $trigger.data('modal-size') || 'md';
const modalId = 'ajaxModal_' + Date.now();
// If no usable URL, bail
if (!modalUrl || modalUrl === '#') {
console.warn('ajax-modal: No modal URL found on trigger:', this);
return;
}
// Show loading spinner while fetching content
const loadingSpinner = `
<div id="modal-loading-spinner" class="text-center p-5">
<i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
</div>`;
$('.content-wrapper').append(loadingSpinner);
// Make AJAX request
$.ajax({
url: modalUrl,
method: 'GET',
dataType: 'json',
success: function (response) {
$('#modal-loading-spinner').remove();
if (response.error) {
alert(response.error);
return;
}
const modalHtml = `
<div class="modal fade" id="${modalId}" tabindex="-1">
<div class="modal-dialog modal-${modalSize}">
<div class="modal-content border-dark">
${response.content}
</div>
</div>
</div>`;
$('.content-wrapper').append(modalHtml);
const $modal = $('#' + modalId);
$modal.modal('show');
$modal.on('hidden.bs.modal', function () {
$(this).remove();
});
},
error: function (xhr, status, error) {
$('#modal-loading-spinner').remove();
alert('Error loading modal content. Please try again.');
console.error('Modal AJAX Error:', status, error);
}
});
});