时间戳

首页 > 解决方案 > 当事件发生（单击按钮）时，如何将数据从模式对话框发送到侧边栏（反之亦然）？

javascript - 当事件发生（单击按钮）时，如何将数据从模式对话框发送到侧边栏（反之亦然）？

问题描述

我有一个带有简单表单的侧边栏，其中有一个下拉菜单，可以选择条目的某些类别。它旁边有一个按钮供用户添加新类别。这个按钮显示一个模态对话框，在这个对话框中有一个输入框供用户输入新的类别名称和一个“添加新”按钮，它将把新项目发送回侧边栏。我希望相应的下拉列表将新类别包含在其选项中，并且其文本已经填充了新名称。

到目前为止，我所能想到的只是使用，localStorage但是当按下按钮并关闭对话框并提交新值时，我不知道如何触发对侧边栏（或任何其他元素）下拉列表的更新。我一直在看这个和这个，但我真的无法让它适用于我的情况。

我压制了这些Code.gs作品，因为它们工作得很好并且不相关。

sidebar.html

<script>
  document.getElementById("btn-add-category").addEventListener("click", goToAddNewItem);

  function goToAddNewItem(){
    google.script.run.loadNewItemForm();
  }
      
  (async () => {
    //After modal dialog has finished, receiver will be resolved
    let receiver = new Promise((res, rej) => {
    window.modalDone = res;
    });
    var message = await receiver;
    
    document.getElementById("category-sidebar").value = message
  })();
</script>

modal.html

这是html模态对话框的文件：

<body>
  <div class="form-group" id="input-category">
    <label for="category">Category:</label>
    <div class="input-group input-line">
      <input type="text" class="form-control form-control-sm" id="category">
    </div>
  </div>
  <div class="form-group">
    <button id="btn-add-new" class="btn btn-dark btn-sm">Add New</button>
  </div>

  <script>

    function findSideBar(limit) {
      let f = window.top.frames;

      for (let i = 0; i < limit; ++i) {
        try {
          if (
            f[i] /*/iframedAppPanel*/ &&
            f[i].length &&
            f[i][0] && //#sandboxFrame
            f[i][0][0] && //#userHtmlFrame
            window !== f[i][0][0] //!== self
          ) {
            console.info('Sidebar found ');
            var sidebar = f[i][0][0];
            sidebar.modalDone(document.getElementById("category").value);
          }
        } catch (e) {
          console.error(e);
          continue;
        }
      }
    };

    function afterAddNewClicked(){
      findSideBar(10);
      google.script.host.close();
    }

    document.getElementById("btn-add-new").addEventListener("click", afterAddNewClicked);

  </script>
</body>

编辑：

modal.html现在有这个功能findSidebar

标签： javascriptgoogle-apps-scriptgoogle-sheets

解决方案

sidebar.modalDone = document.getElementById("category").value

res或modalDone需要调用。仅仅分配一个值是行不通的。尝试

sidebar.modalDone(document.getElementById("category").value);

推荐阅读