Исправлена кнопка сохранить в модальном окне создания клиента

Проблема: Обработчик события для кнопки 'Сохранить' был добавлен ДО того, как
элемент кнопки появился в 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>
This commit is contained in:
2025-11-11 01:04:51 +03:00
parent 81cadc8cf9
commit 10128bb9bd

View File

@@ -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">