javascript - 如何获取JQuery颜色框的 "break out"

Question

如果我有一个 JQuery colorbox()使用 iframe，并且有一个 <form>在其中(例如登录表单)，然后:

• 如果表单提交不成功(例如必填字段为空)，则应重新显示表单并在 iframe 中显示错误
• 如果表单成功(例如密码正确)，周边页面应该重新加载结果

只有服务器请求才能知道提交是否成功(例如登录表单的密码是否正确)，因此不能使用 target= <form> 上的参数标签。 (因为那必须在请求页面上设置，这里还不知道响应是否成功。)

应该如何实现这一目标？现在我执行以下操作:

• <form>没有特定的“目标”，即结果显示在 iframe 中
• 如果表单提交不成功，则在iframe中重新显示表单(简单情况)
• 如果表单提交成功，则在 iframe 中显示一个包含 Javascript 的“响应”页面以刷新整个页面。

Javascript 如下所示(wicket:id="link" 表示网络框架将 href= 添加到链接中，以指定应在整个浏览器窗口中显示的结果页面)。

<a wicket:id="link" id="linkToSuccessPage" target="_top"></a>
<script>
  $(function() {
    top.$.colorbox.close();
    top.location.href =
      document.getElementById("linkToSuccessPage").getAttribute("href");
  });
</script>

这种方法的问题在于，首先它感觉不雅，但它会产生一种奇怪的视觉效果。颜色框首先关闭，然后发生这种重定向。另一种选择是不关闭颜色框，但是在重定向发生时颜色框的内容会被空白页面替换。

有什么更好的方法吗？这一定是一个普遍的问题，一定有一个共同的优雅解决方案？

附言由于以下原因，我必须使用颜色框的 iframe 方法(而不是 JQuery 获取表单并将其放置在页面中的 <div> 中):我正在使用的网络框架(Wicket ) 将表单提交到相对 URL。 <form> 中的相对 URL是相对于包含表单的页面的 URL(= 颜色框内容)。如果 <div>被使用，然后这个表单被插入到具有不同 URL 的周围页面中，因此表单提交中的相对 URL 不起作用。

Answer 1

我认为您仍然可以在不使用 iframe 的情况下执行此操作，这将允许您为 colorbox 窗口使用内联内容。尽管此建议适用于 iframe，但在使用内联内容时会更简洁。

首先，使用this jQuery ajax form plugin管理表单提交的流程。这将允许您管理您的成功/错误代码，而无需加载任何额外的内容，正如您提到的那样，刷新页面或重新加载表单。在您的 docReady 中，像这样实例化 ajax 表单:

$('#login').ajaxForm({
    beforeSubmit: onSubmitForm,
    error: onServerResponse,
    success: onServerResponse,
    url: "site.com"
});

然后您只需在这 3 个回调中执行您需要执行的操作(全部在父页面的上下文中)。因为您在这里定义了 url，所以 wicket 对表单的 action 属性所做的任何操作都无关紧要。事实上，除了现在您可以省略 action 属性之外，表单的 html 代码并没有改变。

通过使用内联颜色框，在保持数据状态(如果有)的同时在它们之间切换很容易。首先，假设我们将给我们所有的颜色框链接一个类名“colorboxLink”，我们在 docReady 中也需要这个:

$(".colorboxLink").colorbox({
    inline:true
});

然后在隐藏的 div 中设置所有颜色框(其中一个是您的表单):

<div style="display:none">
    <form id="login" method="post"> 
        Username: <input type="text" name="username" /> <br>
        Password: <input type="password" name="password" /> 
        <input type="submit" value="Go" />
    </form>

    <div id="error">
        Error message.<br>
        <a class="colorboxLink" href="#login">&laquo; Back</a>
    </div>
</div>

因此，第一个颜色框窗口将打开一个链接，后退/前进/其他窗口可以通过颜色框内的链接打开(如“错误”div 中所示)，并在函数中打开颜色框:

$.colorbox({
    open:true,
    href: "#error",
    inline:true
});

您还可以在更改窗口时避免闪烁，因为颜色框永远不会完全关闭。

在 this jsfiddle 查看完整示例.