Question

我在页面上有一个项目列表，并带有一个具有[up-modal]属性的链接，该页面指向带有向列表添加新项目的表单的页面。该表单在模式对话框中打开，并具有[up-target]属性，因此由Ajax在unpoly的帮助下提交。

我不知道如何关闭对话框并更新基础页面上的项目列表，以防表单提交时没有错误，并且服务器端是否有错误，我希望对话框保留下来打开并显示带有错误的表格。

如果我在打开模式对话框的链接中添加[up-sticky]属性，则正确提交的表单的结果将显示在模式对话框中，而不是放在页面上。

没有[up-sticky]属性的表单在提交后出现错误，将替换基础页面。

那怎么做呢？

Answer 1

我假设您有一条路线/page-with-list和一条路线/modal-form。

在/page-with-list中，您有一个<div class="list">...</div>。

在/modal-form中，我将这样写<form>：

<form action="/process-modal-form" up-target=".list" up-layer="page" up-fail-layer="modal">
  ..
</form>

如果表单成功，这应该替换页面层中的.list，但是如果表单失败，则替换其模式层中的表单。在表单中，Unpoly会自动设置一个与表单匹配的up-fail-target属性。

Answer 2

我在这里回答我的问题，可能对某人有帮助。因此，在我的情况下，如果服务器将页面上包含表单的页面发回，并且模式对话框打开，则意味着该表单提交时出现错误，无法在服务器端接受。要检查这些条件，并在必要时关闭模式对话框并刷新基础页面，我编写了一个脚本：

up.on("up:fragment:inserted", function(ev, fragment) {
    if (up.modal.isOpen() && !fragment.getElementsByTagName("form").length) {
        up.modal.close()
    }
})
up.on("up:modal:closed", function(ev) {
     up.reload("main")
})

编辑当我使用上述方法时，在我需要将无格式的内容放入模式之前，它仍然可以正常工作。在那种情况下，我的模式只是打开并立即关闭，所以我像这样重新修改了以前的实现：

let submit_from_modal = false;

up.on("up:fragment:inserted", function(ev, fragment) {
    if (up.modal.isOpen() && !fragment.getElementsByTagName("form").length && submit_from_modal) {
        up.modal.close()
        up.emit("modal:form:submit:success")
    }
    submit_from_modal = false
})

up.on("up:modal:close", function() {
    submit_from_modal = false
})

up.on("modal:form:submit:success", function(ev) {
    up.reload("main")
})

up.on("up:form:submit", function() {
    if (up.modal.isOpen()) {
        submit_from_modal = true
    }
})

条件非多边形模态对话框关闭

2 个答案: