2

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

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

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

如果没有 [up-sticky] 属性，提交后有错误的表单将替换底层页面。

那么如何做到这一点呢？

4

2 回答 2

4

我假设你有一条路线/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与表单匹配的属性。

于 2019-03-19T07:07:04.737 回答
1

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

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
    }
})
于 2019-03-14T06:29:30.653 回答