java - 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()不再了。