Added data-toggle='ajax-modal' to trigger the ajax modal instead, also added an ajax header and and footer to dedup code

ajax/ajax_contact_edit.php

@@ -1,14 +1,6 @@
 <?php
 
-require_once '../includes/inc_all_ajax.php';
+require_once '../includes/ajax_header.php';
-
-// ajax_contact_edit.php
-
-// Check for the 'id' parameter
-if (!isset($_GET['id'])) {
-    echo json_encode(['error' => 'Contact ID missing.']);
-    exit;
-}
 
 $contact_id = intval($_GET['id']);
 
@@ -332,12 +324,6 @@ ob_start();
     </div>
 </form>
 
-<script>// Initialize Select2 Elements
-$('.select2').select2({
-  theme: 'bootstrap4',
-});
-</script>
-
 <!-- JavaScript to Show/Hide Password Form Group -->
 <script>
 
@@ -376,9 +362,8 @@ $(document).ready(function() {
 </script>
 
 <?php
-    $content = ob_get_clean();
 
-    // Return the title and content as a JSON response
+require_once "../includes/ajax_footer.php";
-    echo json_encode(['title' => $title, 'content' => $content]);
+
 ?>
 

client_contact_details.php

@@ -156,7 +156,10 @@ if (isset($_GET['contact_id'])) {
 
             <div class="card card-dark">
                 <div class="card-body">
-                    <button type="button" class="btn btn-default float-right" data-toggle="modal" data-target="#editContactModal<?php echo $contact_id; ?>">
+                    <button type="button" class="btn btn-default float-right"
+                        data-toggle="ajax-modal"
+                        data-ajax-url="ajax/ajax_contact_edit.php"
+                        data-ajax-id="<?php echo $contact_id; ?>">
                         <i class="fas fa-fw fa-user-edit"></i>
                     </button>
                     <h3 class="text-bold"><?php echo $contact_name; ?></h3>
@@ -213,7 +216,6 @@ if (isset($_GET['contact_id'])) {
                     <?php } ?>
                     <div class="mt-2"><i class="fa fa-fw fa-clock text-secondary mr-2"></i><?php echo date('Y-m-d', strtotime($contact_created_at)); ?></div>
 
-                    <?php require_once "modals/client_contact_edit_modal.php";
  ?>
 
                 </div>

client_contacts.php

@@ -383,7 +383,8 @@ $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
                                             <a class="dropdown-item" href="#" data-toggle="modal" data-target="#createContactNoteModal<?php echo $contact_id; ?>">
                                                 <i class="fas fa-fw fa-sticky-note mr-2"></i>Make Note
                                             </a>
-                                            <a class="dropdown-item ajax-trigger" href="#"
+                                            <a class="dropdown-item" href="#"
+                                                data-toggle="ajax-modal"
                                                 data-ajax-url="ajax/ajax_contact_edit.php"
                                                 data-ajax-id="<?php echo $contact_id; ?>">
                                                 <i class="fas fa-fw fa-edit mr-2"></i>Edit

includes/ajax_footer.php

@@ -0,0 +1,12 @@
+<script>// Initialize Select2 Elements
+$('.select2').select2({
+  theme: 'bootstrap4',
+});
+</script>
+
+<?php
+    $content = ob_get_clean();
+
+    // Return the title and content as a JSON response
+    echo json_encode(['title' => $title, 'content' => $content]);
+?>

includes/ajax_header.php

@@ -5,3 +5,9 @@ require_once "../functions.php";
 require_once "../check_login.php";
 
 header('Content-Type: application/json');
+
+// Check for the 'id' parameter
+if (!isset($_GET['id'])) {
+    echo json_encode(['error' => 'ID missing.']);
+    exit;
+}

js/generic_modal_loader.js

@@ -8,7 +8,7 @@
             Edit Contact
         </button>
 */
-$(document).on('click', '.ajax-trigger', function (e) {
+$(document).on('click', '[data-toggle="ajax-modal"]', function (e) {
     e.preventDefault();
     
     // Get the URL and ID from the element's data attributes.