问题描述
我有一个带有简单表单的侧边栏,带有一个下拉菜单,用于选择条目的某些类别。旁边有一个按钮供用户添加新类别。此按钮显示一个模式对话框,在此对话框中有一个供用户输入新类别名称的输入框和一个“添加新”按钮,用于将新项目发送回侧边栏。我希望相应的下拉菜单将新类别包含在其选项中,并且其文本已经用新名称填充。
到目前为止我能想到的只是使用 localStorage
但我不知道如何在按下按钮和对话框时触发对侧边栏(或任何其他元素)下拉列表的更新关闭并提交新值。我一直在研究 this 和 this,但我无法真正让它适用于我的情况。
我压制了 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
解决方法
sidebar.modalDone = document.getElementById("category").value
res
或 modalDone
需要被调用。仅仅分配一个值是行不通的。试试
sidebar.modalDone(document.getElementById("category").value);