Блог

Справочная информация: я показываю список на веб-сайте. В каждой строке списка есть кнопка редактирования, которая открывает модальный элемент Materialize CSS. Внутри модального элемента находится HTML-форма, которая извлекает текущие значения из этой конкретной строки в списке, которые можно редактировать с помощью новых значений.

Проблема: после отправки изменений в модальной форме модальная форма сохранит значения этой конкретной строки, даже при выборе другой строки. Этого не происходит, когда модальная форма не отправлена.

Временное решение: я перезагружаю всю страницу при отправке модального элемента. Таким образом, модальное содержимое также обновляется, но пользовательский интерфейс страдает, поскольку пользователю всегда нужно ждать перезагрузки страницы.

Вопрос: Есть ли способ перезагрузить или обновить содержимое модального элемента или модальной формы без перезагрузки всей веб-страницы? В идеале, модальный элемент обновит и загрузит правильные значения для каждой строки после отправки редактирования. Я открыт для других идей / решений.

Код:

  auth.onAuthStateChanged(user => {
        if (user) {
        const editForm = document.querySelector('#edit-form');
      
        editForm.addEventListener('submit', (e) => {
          e.preventDefault();
      
          db.collection('users').doc(user.uid).collection('items').doc(editForm.itemID.value).collection('transactions').doc(editForm.transactionID.value).update({
            amount_edit: (parseFloat(editForm.amountEdit.value)*-1).toFixed(2),
            name_edit: editForm.nameEdit.value,
          }).then(() => {
            // close the edit-modal
            const modaledit = document.querySelector('#modal-edit');
            M.Modal.getInstance(modaledit).close();
            editForm.reset();
            location.reload()
          }).catch(err => {
            console.log(err.message);
          });
        })
            } else {
            }
          });
  

Немного опоздал на вечеринку. Вы могли бы сбросить, а затем отправить событие фокусировки для каждого поля. editForm.reset()
editForm.querySelectorAll(`[name]`).forEach(i => i.dispatchEvent(new Event('focus')));