Attempt to Fix duplicate data entries by fast clicking submit in modals using ajax_modal.js include

js/ajax_modal.js

@@ -1,61 +1,114 @@
-// Ajax Modal Load Script
+// Ajax Modal Load Script (deduped + locked)
+function hashKey(str) {
+    let h = 0;
+    for (let i = 0; i < str.length; i++) {
+        h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+    }
+    return Math.abs(h).toString(36);
+}
+
 $(document).on('click', '.ajax-modal', function (e) {
     e.preventDefault();
 
     const $trigger = $(this);
 
-  // Prefer data-modal-url, fallback to href
+    // prevent spam clicks on same trigger
-  let modalUrl = $trigger.data('modal-url') || $trigger.attr('href') || '#';
+    if ($trigger.data('ajaxModalLoading')) {
-  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
+    $trigger
-  const loadingSpinner = `
+        .data('ajaxModalLoading', true)
-    <div id="modal-loading-spinner" class="text-center p-5">
+        .prop('disabled', true)
-      <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
+        .addClass('disabled');
-    </div>`;
+
-  $('.content-wrapper').append(loadingSpinner);
+    // Prefer data-modal-url, fallback to href
+    const modalUrl = $trigger.data('modal-url') || $trigger.attr('href') || '#';
+    const modalSize = $trigger.data('modal-size') || 'md';
+
+    if (!modalUrl || modalUrl === '#') {
+        console.warn('ajax-modal: No modal URL found on trigger:', this);
+
+        $trigger
+            .data('ajaxModalLoading', false)
+            .prop('disabled', false)
+            .removeClass('disabled');
+
+        return;
+    }
+
+    // stable IDs based on URL (prevents duplicates)
+    const key = hashKey(String(modalUrl));
+    const modalId = 'ajaxModal_' + key;
+    const spinnerId = 'modal-loading-spinner-' + key;
+
+    // if modal already exists, just show it
+    const $existing = $('#' + modalId);
+    if ($existing.length) {
+        $existing.modal('show');
+
+        $trigger
+            .data('ajaxModalLoading', false)
+            .prop('disabled', false)
+            .removeClass('disabled');
+
+        return;
+    }
+
+    // Show loading spinner while fetching content (deduped)
+    $('#' + spinnerId).remove();
+    $('.content-wrapper').append(`
+        <div id="${spinnerId}" class="text-center p-5">
+            <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
+        </div>
+    `);
 
-  // Make AJAX request
     $.ajax({
         url: modalUrl,
         method: 'GET',
-    dataType: 'json',
+        dataType: 'json'
-    success: function (response) {
+    })
-      $('#modal-loading-spinner').remove();
+    .done(function (response) {
+        $('#' + spinnerId).remove();
 
-      if (response.error) {
+        if (response && response.error) {
             alert(response.error);
             return;
         }
 
+        // guard against race: if another request already created it
+        if ($('#' + modalId).length) {
+            $('#' + modalId).modal('show');
+            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}
+                        ${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) {
+    .fail(function (xhr, status, error) {
-      $('#modal-loading-spinner').remove();
+        $('#' + spinnerId).remove();
         alert('Error loading modal content. Please try again.');
         console.error('Modal AJAX Error:', status, error);
-    }
+    })
+    .always(function () {
+        $trigger
+            .data('ajaxModalLoading', false)
+            .prop('disabled', false)
+            .removeClass('disabled');
     });
 });