Javascript 如何刷新物化CSS模式的内容?

Javascript 如何刷新物化CSS模式的内容?,javascript,forms,modal-dialog,materialize,Javascript,Forms,Modal Dialog,Materialize,背景:我正在网站上显示一个列表。列表中的每一行都有一个编辑按钮,用于打开一个物化CSS模式。模式内部是一个HTML表单,它从列表中的特定行中提取当前值,可以使用新值对其进行编辑 问题:提交模式表单中的编辑后,模式将保留该特定行的值,即使选择其他行。如果未提交模式表单,则不会发生这种情况 临时解决方案:提交模式时,我将重新加载整个页面。这样,模式内容也会刷新,但用户体验会受到影响,因为用户需要始终等待页面重新加载 问题:是否有办法在不重新加载整个网页的情况下重新加载或刷新模式或模式表单的内容?理想

背景:我正在网站上显示一个列表。列表中的每一行都有一个编辑按钮,用于打开一个物化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 {
            }
          });