From 5dc761932eb13659532f3ac701db34d9e427fac7 Mon Sep 17 00:00:00 2001
From: Ryan Sawyer <67876161+RyanSawyer6003@users.noreply.github.com>
Date: Wed, 10 Dec 2025 10:01:16 -0600
Subject: [PATCH 1/2] Update app.js

Added fix for nested modals closing parent modals
---
 js/app.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/js/app.js b/js/app.js
index edae3f181..7f2d73000 100644
--- a/js/app.js
+++ b/js/app.js
@@ -401,3 +401,33 @@ $(document).ready(function() {
     // Data Tables
     new DataTable('.dataTables');
 });
+
+/*
+ |---------------------------------------------------------------
+ | Nested Modal Fix for Bootstrap/AdminLTE
+ | Prevents parent modals from closing when a child modal closes
+ |---------------------------------------------------------------
+*/
+$(document).on('show.bs.modal', '.modal', function () {
+    // How many modals are currently visible?
+    const visibleModals = $('.modal:visible').length;
+
+    // Increase z-index for each new modal
+    const zIndex = 1040 + (10 * visibleModals);
+    $(this).css('z-index', zIndex);
+
+    // Delay required because Bootstrap inserts backdrop asynchronously
+    setTimeout(() => {
+        $('.modal-backdrop').not('.modal-stack')
+            .css('z-index', zIndex - 1)
+            .addClass('modal-stack'); // mark backdrops so they aren't reset
+    }, 0);
+});
+
+// Restore modal-open class when closing a child modal
+$(document).on('hidden.bs.modal', '.modal', function () {
+    if ($('.modal:visible').length > 0) {
+        // Ensure background scroll remains locked
+        $('body').addClass('modal-open');
+    }
+});

From bad5229137d39f4d2ba72c1146440bd3a02e9279 Mon Sep 17 00:00:00 2001
From: Ryan Sawyer <67876161+RyanSawyer6003@users.noreply.github.com>
Date: Wed, 10 Dec 2025 11:02:07 -0600
Subject: [PATCH 2/2] Update app.js

Previous Commit didn't correct issue with nested modals. This commit changes how modals are created to put each one in it's own unique container so that closing a nested modal does not close the parent container
---
 js/app.js | 72 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 24 deletions(-)

diff --git a/js/app.js b/js/app.js
index 7f2d73000..be2d09634 100644
--- a/js/app.js
+++ b/js/app.js
@@ -404,30 +404,54 @@ $(document).ready(function() {
 
 /*
  |---------------------------------------------------------------
- | Nested Modal Fix for Bootstrap/AdminLTE
- | Prevents parent modals from closing when a child modal closes
+ | Nested Modal Fix for ITFlow AJAX Modals
+ | Each modal gets a unique container, parent modals remain open
  |---------------------------------------------------------------
 */
-$(document).on('show.bs.modal', '.modal', function () {
-    // How many modals are currently visible?
-    const visibleModals = $('.modal:visible').length;
-
-    // Increase z-index for each new modal
-    const zIndex = 1040 + (10 * visibleModals);
-    $(this).css('z-index', zIndex);
-
-    // Delay required because Bootstrap inserts backdrop asynchronously
-    setTimeout(() => {
-        $('.modal-backdrop').not('.modal-stack')
-            .css('z-index', zIndex - 1)
-            .addClass('modal-stack'); // mark backdrops so they aren't reset
-    }, 0);
-});
 
-// Restore modal-open class when closing a child modal
-$(document).on('hidden.bs.modal', '.modal', function () {
-    if ($('.modal:visible').length > 0) {
-        // Ensure background scroll remains locked
-        $('body').addClass('modal-open');
-    }
-});
+(function() {
+    if (!window.createAjaxModal) return;
+
+    // Keep original function just in case
+    const originalCreateAjaxModal = window.createAjaxModal;
+
+    window.createAjaxModal = function(contentHtml) {
+        // Generate a unique ID for this modal
+        const modalId = 'ajaxModal_' + Date.now();
+
+        // Create a new modal container
+        const $modal = $('<div class="modal fade" tabindex="-1" aria-hidden="true">')
+            .attr('id', modalId)
+            .html(contentHtml)
+            .appendTo('body');
+
+        // Initialize Bootstrap modal
+        $modal.modal('show');
+
+        // Ensure only this modal is removed when hidden
+        $modal.on('hidden.bs.modal', function () {
+            $(this).remove();
+        });
+
+        return $modal;
+    };
+
+    // Optional: Keep proper z-index stacking for multiple nested modals
+    $(document).on('show.bs.modal', '.modal', function () {
+        const zIndex = 1040 + (10 * $('.modal:visible').length);
+        $(this).css('z-index', zIndex);
+        setTimeout(() => {
+            $('.modal-backdrop').not('.modal-stack')
+                .css('z-index', zIndex - 1)
+                .addClass('modal-stack');
+        }, 0);
+    });
+
+    $(document).on('hidden.bs.modal', '.modal', function () {
+        if ($('.modal:visible').length > 0) {
+            $('body').addClass('modal-open');
+        }
+    });
+
+})();
+