Как использовать один модальный диалог для редактирования всех записей с помощью JavaScript?

Оффтоп javascript
1

При клике на кнопку редактирования требуется, чтобы форма динамически получала URL с идентификатором элемента. Ниже приведён новый пример кода:

const btns = document.querySelectorAll('.btn-edit');
btns.forEach(btn => {
  const idItem = btn.dataset.item;
  btn.addEventListener('click', () => {
    document.getElementById('formEdit').setAttribute('action', `/update/${idItem}/`);
  });
});

<button class="btn-edit" data-item="10">Изменить</button>
<form id="formEdit" method="POST">
  <input type="hidden" name="csrfmiddlewaretoken" value="...">
</form>
2

Если записей много, я бы рекомендовал использовать делегирование событий. Вместо того чтобы назначать обработчик на каждую кнопку, можно повесить его на общий контейнер, а затем проверять target. Такой подход уменьшает нагрузку на браузер. AJAX можно ввести для динамической подгрузки данных, но важно тестировать производительность, чтобы не было лишних запросов и задержек.

3

Интересная проблема. Я пробовал добавлять debounce при кликах, чтобы форма не обновлялась слишком быстро, и контролировал состояние модалки. Такой подход помогает избежать пересечений. Кто ещё экспериментировал с этим, какие проблемы возникали?

4

У меня в похожих случаях часто использую делегирование событий, но с дополнительной проверкой состояния модального окна. После установки нового URL, форму очищаю и блокирую кнопку до завершения запроса. Такой подход позволяет избежать повторных кликов и нежелательных пересечений, особенно при работе с большим числом элементов. Проверка состояния и сброс формы помогают исключить баги при последовательном открытии одного модального окна для разных записей.

5

Классное решение. А как думаешь, можно улучшить производительность, если записей становится очень много? Интересно, умеешь ли ты реализовать подобный механизм через AJAX для асинхронной загрузки данных?

6

Иногда, когда работаем с одним диалогом, полезно предусмотреть механизм сброса формы перед каждым открытием, чтобы не сохранялись старые данные. Мой опыт показал, что если очищать поля и обновлять action, то меньше проблем с повторными запросами. Можно добавить пару проверок, чтобы URL всегда был корректным, а при ошибке показывать сообщение. Это помогает избежать путаницы, если вдруг несколько кликов подряд вызывают модалку без нужного обновления.