From 10128bb9bd405917dc6c8efc7dd1170b7dac24a4 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Tue, 11 Nov 2025 01:04:51 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B8=D1=82=D1=8C=20=D0=B2?=
 =?UTF-8?q?=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=BC=20?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=BD=D0=B5=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Проблема: Обработчик события для кнопки 'Сохранить' был добавлен ДО того, как
элемент кнопки появился в DOM. JavaScript пытался найти элемент с id='save-customer-btn'
когда его еще не было в HTML, поэтому обработчик никогда не срабатывал.

Решение: Переместить код обработчика события в отдельный скрипт,
расположенный ПОСЛЕ определения модального окна в HTML (после строки с </div> модала).

Это гарантирует, что:
1. HTML элементы уже загружены в DOM
2. JavaScript может найти элемент по id
3. Обработчик события корректно прикрепляется к кнопке

Теперь при нажатии на кнопку 'Создать клиента' будет:
✓ Валидирована форма (имя обязательно)
✓ Отправлен AJAX запрос на сервер
✓ Создан новый клиент
✓ Закрыто модальное окно
✓ Выбран созданный клиент в Select2
✓ Очищена форма

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../orders/templates/orders/order_form.html   | 135 +++++++++---------
 1 file changed, 69 insertions(+), 66 deletions(-)

diff --git a/myproject/orders/templates/orders/order_form.html b/myproject/orders/templates/orders/order_form.html
index 5c54793..97bad49 100644
--- a/myproject/orders/templates/orders/order_form.html
+++ b/myproject/orders/templates/orders/order_form.html
@@ -961,72 +961,6 @@ if (typeof $ !== 'undefined') {
         }
     });
 
-    // Обработчик сохранения нового клиента
-    document.getElementById('save-customer-btn').addEventListener('click', function() {
-        const name = document.getElementById('customer-name').value.trim();
-        const phone = document.getElementById('customer-phone').value.trim();
-        const email = document.getElementById('customer-email').value.trim();
-
-        // Базовая валидация
-        const errors = [];
-        if (!name) {
-            errors.push('Имя клиента обязательно');
-        }
-
-        if (errors.length > 0) {
-            const errorDiv = document.getElementById('customer-form-errors');
-            errorDiv.innerHTML = '<ul class="mb-0">' + errors.map(e => '<li>' + e + '</li>').join('') + '</ul>';
-            errorDiv.style.display = 'block';
-            return;
-        }
-
-        // Отправляем AJAX запрос
-        fetch('{% url "customers:api-create-customer" %}', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': '{{ csrf_token }}'
-            },
-            body: JSON.stringify({
-                name: name,
-                phone: phone || null,
-                email: email || null
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                // Закрываем модальное окно
-                const modal = bootstrap.Modal.getInstance(document.getElementById('createCustomerModal'));
-                modal.hide();
-
-                // Выбираем созданного клиента в Select2
-                const newOption = new Option(data.name, data.id, true, true);
-                $customerSelect.append(newOption).trigger('change');
-
-                // Очищаем форму
-                document.getElementById('customer-name').value = '';
-                document.getElementById('customer-phone').value = '';
-                document.getElementById('customer-email').value = '';
-                document.getElementById('customer-form-errors').innerHTML = '';
-                document.getElementById('customer-form-errors').style.display = 'none';
-
-                // Показываем успешное сообщение
-                alert(`Клиент "${data.name}" успешно создан!`);
-            } else {
-                const errorDiv = document.getElementById('customer-form-errors');
-                errorDiv.innerHTML = '<div class="alert alert-danger mb-0">' + data.error + '</div>';
-                errorDiv.style.display = 'block';
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            const errorDiv = document.getElementById('customer-form-errors');
-            errorDiv.innerHTML = '<div class="alert alert-danger mb-0">Ошибка при создании клиента: ' + error.message + '</div>';
-            errorDiv.style.display = 'block';
-        });
-    });
-
     // === ВРЕМЕННЫЕ КОМПЛЕКТЫ ===
 
     // Модальное окно для создания временного комплекта
@@ -1317,6 +1251,75 @@ if (typeof $ !== 'undefined') {
     </div>
 </div>
 
+<!-- Обработчик сохранения нового клиента (ДОЛЖЕН быть ПОСЛЕ модального окна в HTML) -->
+<script>
+document.getElementById('save-customer-btn').addEventListener('click', function() {
+    const name = document.getElementById('customer-name').value.trim();
+    const phone = document.getElementById('customer-phone').value.trim();
+    const email = document.getElementById('customer-email').value.trim();
+
+    // Базовая валидация
+    const errors = [];
+    if (!name) {
+        errors.push('Имя клиента обязательно');
+    }
+
+    if (errors.length > 0) {
+        const errorDiv = document.getElementById('customer-form-errors');
+        errorDiv.innerHTML = '<ul class="mb-0">' + errors.map(e => '<li>' + e + '</li>').join('') + '</ul>';
+        errorDiv.style.display = 'block';
+        return;
+    }
+
+    // Отправляем AJAX запрос
+    fetch('{% url "customers:api-create-customer" %}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': '{{ csrf_token }}'
+        },
+        body: JSON.stringify({
+            name: name,
+            phone: phone || null,
+            email: email || null
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Закрываем модальное окно
+            const modal = bootstrap.Modal.getInstance(document.getElementById('createCustomerModal'));
+            modal.hide();
+
+            // Выбираем созданного клиента в Select2
+            const $customerSelect = $('select[name="customer"]');
+            const newOption = new Option(data.name, data.id, true, true);
+            $customerSelect.append(newOption).trigger('change');
+
+            // Очищаем форму
+            document.getElementById('customer-name').value = '';
+            document.getElementById('customer-phone').value = '';
+            document.getElementById('customer-email').value = '';
+            document.getElementById('customer-form-errors').innerHTML = '';
+            document.getElementById('customer-form-errors').style.display = 'none';
+
+            // Показываем успешное сообщение
+            alert(`Клиент "${data.name}" успешно создан!`);
+        } else {
+            const errorDiv = document.getElementById('customer-form-errors');
+            errorDiv.innerHTML = '<div class="alert alert-danger mb-0">' + data.error + '</div>';
+            errorDiv.style.display = 'block';
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        const errorDiv = document.getElementById('customer-form-errors');
+        errorDiv.innerHTML = '<div class="alert alert-danger mb-0">Ошибка при создании клиента: ' + error.message + '</div>';
+        errorDiv.style.display = 'block';
+    });
+});
+</script>
+
 <!-- Модальное окно для создания временного комплекта -->
 <div class="modal fade" id="tempKitModal" tabindex="-1" aria-labelledby="tempKitModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">