AS1024
/
itflow
mirror of https://github.com/itflow-org/itflow
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reworked the ajax-modal function to be more simplified and use less data attributes

This commit is contained in:
johnnyq 2025-08-16 01:02:16 -04:00
parent 3bb0ef6f39
commit 236d895498
3 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
includes/modal_footer.php
View File

@ -6,4 +6,5 @@
// Return the title and content as a JSON response
echo json_encode(['content' => $content]);
exit();
?>

57
js/ajax_modal.js
View File

@ -12,6 +12,63 @@
</button>
*/
// New Way
$(document).on('click', '.ajax-modal', function (e) {
e.preventDefault();
const $trigger = $(this);
const modalUrl = $trigger.data('modal-url');
const modalSize = $trigger.data('modal-size') || 'md';
const modalId = 'ajaxModal_' + new Date().getTime();
// 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;
}
// Build modal wrapper
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');
// Remove modal after it's closed
$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);
}
});
});
// OLD Way
$(document).on('click', '[data-toggle="ajax-modal"]', function (e) {
e.preventDefault();

25
user/clients.php
View File

@ -104,7 +104,7 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
<?php } ?>
</div>
</div>
<div class="card-header pb-1 pt-3">
<div class="card-header pb-2 pt-3">
<form autocomplete="off">
<input type="hidden" name="leads" value="<?php echo $leads_filter; ?>">
<input type="hidden" name="archived" value="<?php echo $archived; ?>">
@ -289,8 +289,8 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
<form id="bulkActions" action="post.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
<div class="table-responsive-sm">
<table class="table table-hover mb-0">
<thead class="<?php if ($num_rows[0] == 0) { echo "d-none"; } ?> text-nowrap bg-light">
<table class="table table-hover mb-0 text-nowrap">
<thead class="<?php if ($num_rows[0] == 0) { echo "d-none"; } ?> bg-light">
<tr>
<td class="pr-0">
<div class="form-check">
@ -514,8 +514,8 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
</div>
</td>
<td class="text-nowrap"><?php echo $location_address_display; ?></td>
<td class="text-nowrap">
<td><?php echo $location_address_display; ?></td>
<td>
<?php
if (empty($contact_name) && empty($contact_phone) && empty($contact_mobile) && empty($client_email)) {
echo "-";
@ -523,11 +523,9 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
if (!empty($contact_name)) { ?>
<div class="text-bold">
<i class="fa fa-fw fa-user text-secondary mr-2 mb-2"></i><a href="#"
data-toggle="ajax-modal"
data-modal-size="lg"
data-ajax-url="ajax/ajax_contact_details.php?client_id=<?php echo $client_id; ?>"
data-ajax-id="<?php echo $contact_id; ?>"><?php echo $contact_name; ?>
<i class="fa fa-fw fa-user text-secondary mr-2 mb-2"></i><a class="ajax-modal" href="#"
data-modal-url="ajax/ajax_contact_details.php?client_id=<?= $client_id ?>&id=<?= $contact_id ?>" data-modal-size="lg"><?= $contact_name; ?>
</a>
</div>
<?php } else {
@ -553,7 +551,7 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
<?php } ?>
</td>
<td>
<td class="text-wrap">
<?php echo "$contact_count_display$vendor_count_display$asset_count_display$credential_count_display$software_count_display$ticket_count_display"; ?>
</td>
@ -591,10 +589,7 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"
data-toggle="ajax-modal"
data-ajax-url="modals/client_edit.php"
data-ajax-id="<?php echo $client_id; ?>">
<a class="dropdown-item ajax-modal" href="#" data-modal-url="modals/client_edit.php?id=<?= $client_id ?>">
<i class="fas fa-fw fa-edit mr-2"></i>Edit
</a>