Theme Fixes for adminlte 4

js/ajax_modal.js

@@ -20,7 +20,7 @@ $(document).on('click', '.ajax-modal', function (e) {
     <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);
+  $('.app-main').append(loadingSpinner);
 
   // Make AJAX request
   $.ajax({
@@ -44,9 +44,9 @@ $(document).on('click', '.ajax-modal', function (e) {
           </div>
         </div>`;
 
-      $('.content-wrapper').append(modalHtml);
+      $('.app-main').append(modalHtml);
       const $modal = $('#' + modalId);
-      $modal.modal('show');
+      bootstrap.Modal.getOrCreateInstance($modal[0]).show();
 
       $modal.on('hidden.bs.modal', function () {
         $(this).remove();

js/app.js

@@ -427,7 +427,9 @@ $(document).ready(function() {
 
     // Enable Popovers
     $(function() {
-        $('[data-bs-toggle="popover"]').popover();
+        document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
+            bootstrap.Popover.getOrCreateInstance(el);
+        });
     });
 
     // Data Tables
@@ -538,16 +540,19 @@ $(document).off('change.itflowEventTime').on('change.itflowEventTime', '.event-s
  * until the next page load.
  */
 function flashTooltip(button, message) {
-    $(button)
-        .tooltip('dispose')
-        .tooltip({
-            trigger: 'manual',
-            placement: 'bottom',
-            title: message
-        })
-        .tooltip('show');
+    const el = button instanceof Element ? button : $(button)[0];
+    if (!el) {
+        return;
+    }
+    bootstrap.Tooltip.getInstance(el)?.dispose();
+    const tip = new bootstrap.Tooltip(el, {
+        trigger: 'manual',
+        placement: 'bottom',
+        title: message
+    });
+    tip.show();
 
-    setTimeout(function() {
-        $(button).tooltip('dispose');
+    setTimeout(function () {
+        tip.dispose();
     }, 1000);
 }

js/confirm_modal.js

@@ -8,7 +8,7 @@ $(document).ready(function() {
       var linkReference = this;
 
       // Show the confirmation modal
-      $("#confirmationModal").modal('show');
+      bootstrap.Modal.getOrCreateInstance(document.getElementById('confirmationModal')).show();
 
       // When the submission is confirmed via the modal
       $("#confirmSubmitBtn").off('click').on('click', function() {

js/show_modals.js

@@ -2,7 +2,7 @@ $(document).ready(function () {
     $('.modal').each(function () {
         const modalId = `#${$(this).attr('id')}`;
         if (window.location.href.indexOf(modalId) !== -1) {
-            $(modalId).modal('show');
+            bootstrap.Modal.getOrCreateInstance($(modalId)[0]).show();
         }
     });
 });