Migrate fully away from Jquery Stage 1

agent/js/ticket_change_client.js

@@ -1,53 +1,67 @@
-$(document).ready(function() {
+document.addEventListener('DOMContentLoaded', function () {
 
     // Function to load contacts for a given client
     function loadContacts(clientId) {
-        if (!clientId) return;
+        if (!clientId) {
+            return;
+        }
 
-        var $contactSelect = $('#contact_select');
-        $contactSelect.html('<option value="">Loading...</option>');
+        const contactSelect = document.getElementById('contact_select');
+        if (!contactSelect) {
+            return;
+        }
+        contactSelect.innerHTML = '<option value="">Loading...</option>';
 
-        $.ajax({
-            url: 'ajax.php',
-            type: 'GET',
-            dataType: 'json',
-            data: {
-                get_client_contacts: 1,
-                client_id: clientId
-            },
-            success: function(response) {
-                $contactSelect.empty();
+        const query = new URLSearchParams({
+            get_client_contacts: 1,
+            client_id: clientId
+        });
+
+        fetch('ajax.php?' + query.toString(), {
+            method: 'GET',
+            headers: { 'Accept': 'application/json' },
+            credentials: 'same-origin'
+        })
+            .then(function (res) {
+                if (!res.ok) {
+                    throw new Error('HTTP ' + res.status);
+                }
+                return res.json();
+            })
+            .then(function (response) {
+                contactSelect.innerHTML = '';
                 if (response.contacts && response.contacts.length > 0) {
-                    $contactSelect.append('<option value="">Select a contact</option>');
-                    $.each(response.contacts, function(i, contact) {
-                        $contactSelect.append(
-                            $('<option>', { 
-                                value: contact.contact_id,
-                                text: contact.contact_name
-                            })
+                    contactSelect.appendChild(new Option('Select a contact', ''));
+                    response.contacts.forEach(function (contact) {
+                        // new Option() sets text content, so contact names are
+                        // never parsed as markup
+                        contactSelect.appendChild(
+                            new Option(contact.contact_name, contact.contact_id)
                         );
                     });
                 } else {
-                    $contactSelect.append('<option value="">No contacts found</option>');
+                    contactSelect.appendChild(new Option('No contacts found', ''));
                 }
 
-                // Refresh Select2
-                refreshTomSelect($contactSelect[0]);
-            },
-            error: function(xhr, status, error) {
+                // Let Tom Select re-read the replaced option list
+                refreshTomSelect(contactSelect);
+            })
+            .catch(function (error) {
                 console.error('AJAX Error:', error);
-                $contactSelect.html('<option value="">Failed to load contacts</option>');
-            }
-        });
+                contactSelect.innerHTML = '<option value="">Failed to load contacts</option>';
+            });
+    }
+
+    const clientSelect = document.getElementById('client_select');
+    if (!clientSelect) {
+        return;
     }
 
     // Load contacts for the currently selected client when modal opens
-    var initialClientId = $('#client_select').val();
-    loadContacts(initialClientId);
+    loadContacts(clientSelect.value);
 
     // Load contacts when client changes
-    $('#client_select').on('change', function() {
-        var clientId = $(this).val();
-        loadContacts(clientId);
+    clientSelect.addEventListener('change', function () {
+        loadContacts(this.value);
     });
 });