如何刷新Materialize CSS Modal的内容？

编程问答 2022-08-11

问题描述

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formsformsformsjavascriptmaterializemodal-dialog