Ajax 在带有 jquery 幻灯片的 JSF 中无法正常工作

Question

我有这个用 JSF 2.0 facelets 编写的应用程序，它有以下代码，应该在 jQuery 滑动控件 的区域中显示一些内容，这意味着你按下显示该区域的按钮，然后再次按下将其隐藏

<f:ajax render="messageID">
      <h:form id="myform" styleClass="form1" >
          <h:message id="messageID" for="signinemail" class="messageforlogin"/>
          <h:panelGrid styleClass="loginpanel" columns="2" cellspacing="4">

          <h:outputText value="Email: "/>
          <h:inputText class="textboxes"  size="20" id="signinemail" 
                      value="#{signinBean.email}" 
                      validatorMessage="Invalid Email, Try Again">
              <f:validateRegex pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>

          </h:inputText>

如您所见，如果未正确键入电子邮件，则应显示 错误消息，正如我之前所说，此区域由 jquery.slidetoggle 函数和按钮控制输入内容的幻灯片，

问题是当用户按下提交按钮（此处未显示）时，幻灯片冻结并且不显示错误消息，当我删除“ajax”时显示消息但幻灯片消失，您必须按下切换再次按钮以查看带有错误消息的幻灯片，我在同一页面中完成了此操作，但没有幻灯片，它非常好。

是否可以显示幻灯片和上面的错误消息？？？

Answer 1

当 JSF ajax 请求完成时，应该重新执行负责设置幻灯片的 jQuery 脚本，因为 ajax 响应会使用从服务器检索到的新元素更改/替换 HTML DOM 树中的元素，这反过来又会当然不再包含那些 jQuery 初始化的事件处理程序了。 jQuery 脚本不会在每次 ajax 请求完成时自动执行，而是仅在您刷新页面时自动执行。

您只需要在 JSF ajax 事件回调处理程序中重新调用您的 jQuery 函数，如下所示：

jsf.ajax.addOnEvent(function(data) {
    if (data.status == "success") {
        yourjQueryFunctionWhichAddsTheSlideEvents();
    }
});

另一种方法是使用 OmniFaces 的<o:onloadScript>。

<o:onloadScript>yourjQueryFunctionWhichAddsTheSlideEvents();</o:onloadScript>

这样你也不再需要$(document).ready()了。