2011-05-11 170 views
2

我在几个地方遇到了同样的问题,我感到非常沮丧。f:ajax在JSF中存在问题,需要双击才能执行

每当我尝试触发一个ajax事件时,它总是需要两次点击,第一个没有任何作用。

我试着点击第一次点击,然后手动刷新网站,但再次没有任何反应。始终需要点击两次才能触发事件。

下面的代码显示了使用复合的简单登录表单。这里登录按钮需要点击两次才能触发。

主体

<body> 
    <h:outputScript library="js" name="topMenuJS.js" /> 


    <div class="topMenu"> 

     <f:ajax execute="pageNavForm" render=":currentMainContent"> 
      <h:form id="pageNavForm"> 
       <h:commandLink styleClass="selector" rendered="#{viewErrandsBean.userID.name != null}" action="#{renderHandler.showCreateIssue()}" value="Create errand" /> 
       <h:commandLink styleClass="selector" rendered="#{viewErrandsBean.userID.name != null}" action="#{renderHandler.showIssue()}"  value="View errand" /> 
       <h:commandLink styleClass="selector" rendered="#{viewErrandsBean.userID.admin}"   action="#{renderHandler.showCreateUser()}" value="Create user" /> 
       <h:commandLink styleClass="lastSelector"             action="#{renderHandler.showLogin()}"  value="Login" /> 
      </h:form> 
     </f:ajax> 

     <div style="clear:both;" /> 

    </div> 

    <h:panelGroup layout="block" id="currentMainContent"> 

     <h:panelGroup rendered="#{renderHandler.loginPanel}" id="loginPanel" 
      layout="block"> 

      <ui:include src="/content/login/login.xhtml"> 
       <ui:param name="renderID" value=":pageNavForm" /> 
      </ui:include> 
     </h:panelGroup> 
    </h:panelGroup> 
</body> 

而login.xhtml提前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 

<ui:composition> 

<h:outputStylesheet library="css" name="loginPageCSS.css" /> 

    <h:panelGroup class="centerBox"> 
     <h:form> 
      <table> 
       <tr> 
        <td>Username</td> 
        <td><h:inputText value="#{viewErrandsBean.loginName}" /></td> 
       </tr> 
       <tr> 
        <td>Password</td> 
        <td><h:inputSecret value="#{viewErrandsBean.loginPass}" /></td> 
       </tr> 
       <tr> 
        <td> 
        <h:commandButton value="Login" action="#{viewErrandsBean.authenticateUser()}" > 
         <f:ajax execute="@form" render="#{renderID}" /> 
        </h:commandButton> 
        </td> 
       </tr> 
      </table> 
     </h:form> 
    </h:panelGroup> 

</ui:composition> 
</html> 

谢谢:)

-----------编辑-----------

我相信我已经找到了问题的根源,但我不知道我该如何修复它或者它为什么会出现。

需要双击的问题只会在渲染具有“Rendered ='boolean'”属性的组件后出现。或者甚至更具体地说,只有在它从“Rendered = false”变为“Rendered = true”之后。

如果渲染设置为true,则以下代码将按预期工作。

<h:panelGroup rendered="#{renderHandler.loginPanel}" id="loginPanel" layout="block"> 
+0

还有其他东西吗?浏览器中的代码是否有其他干扰?就像一个JavaScript或附加的.js文件中的一个小悬停效果? – Steeven 2011-07-08 11:52:31

回答

0

这里是你寻找的答案:不是使用“渲染”,以隐藏自己的登录表单,而是使用CSS来隐藏它和JavaScript来证明这一点。您将获得更好的表单响应时间,而不必回到服务器才决定显示表单。我意识到这可能不适用于你没有提到的其他情况。

我相信你在一个灰色地带(对我们大多数人)在JSF 2和Facelets之间的交互中工作。当您在ajax或post-back期间提问页面以在合成中呈现新元素时,您将添加到JSF组件树中,而不是从头开始构建它的一部分。这就是为什么当你设置渲染为真时你会看到正确的行为。

与组合部分之间传递参数相结合,我不能保证renderID设置为您第一次单击登录时所认为的。

您应该能够通过使用h:outputText输出renderID的值来进行确认。

相关问题