[英]JSF 2.0: Delay rendering (composite) component's contents until AJAX-call re-renders it
[英]JSF 2.0 AJAX re-renders more than the IDs I specify. Not sure if I have a fundamental misunderstanding or just a bug
當我單擊 logOutButton 時,它似乎也在重新呈現 ajaxR 元素。 我希望它只重新呈現我在 f:ajax 呈現屬性中的 ID。 或者它可能正在重新呈現整個頁面。 問題是,為什么它呈現 ajaxR 元素和/或整個頁面,而不僅僅是我指定的 ID。
為確保我清楚:當我單擊注銷按鈕時,由於 rendered="#{userIdBean.isLoggedIn}" 而未呈現 ajaxR 元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
>
<h:head>
<title>SandBox</title>
</h:head>
<h:body>
<h1>SandBox</h1>
<h:form id="form1">
Registration:<br></br>
Email: <h:inputText value="#{regBean.email}"></h:inputText><br></br>
User Id: <h:inputText value="#{regBean.userId}"></h:inputText><br></br>
Password: <h:inputText id="passR" value="#{regBean.password}"></h:inputText><br></br>
<h:outputText rendered="#{userIdBean.isLoggedIn}" id="nodeL" value="Good Luck: #{userIdBean.userId}" style="font-weight:bold" /><br></br>
<h:commandButton value="Submit" type="submit" action="#{regBean.storeUserId}" />
<h:commandButton id="logOutButton" rendered="#{userIdBean.isLoggedIn}" value="Log Out" type="submit" action="#{loginBean.logoutUser}" >
<f:ajax event="keyup" render="nodeL logOutButton"/>
</h:commandButton>
<br></br>
<h:outputText rendered="#{userIdBean.isLoggedIn}" value="AJAX Response: #{userIdBean.userId}"></h:outputText>
</h:form>
</h:body>
</html>
這是 bean 代碼的一個片段。
public String logoutUser(){
userIdBean.setIsLoggedIn(false);
userIdBean.setUserId(null);
return null;
}
你在代碼中有兩個錯誤:
像<h:commandButton>
這樣的UICommand
組件中的<f:ajax event>
必須設置為action
。 您也可以完全不使用event
屬性,然后它將默認為合理的默認值(這是命令組件的action
和輸入組件的valueChange
)。
<h:commandButton id="logOutButton" rendered="#{userIdBean.isLoggedIn}" value="Log Out" type="submit" action="#{loginBean.logoutUser}" > <f:ajax render="nodeL logOutButton"/> </h:commandButton>
<f:ajax render>
客戶端 ID 應該引用始終呈現給客戶端的組件。 然后它將恰好是該組件的 HTML 表示,該表示將由 JavaScript 更新。如果該組件的 HTML 表示不是 JSF 呈現給客戶端,因為該組件的rendered
是false
,那么 JavaScript 找不到任何東西,並且更新,實際上“什么都沒有”會發生。 將其設置為例如@form
表示整個表單:
<h:commandButton id="logOutButton" rendered="#{userIdBean.isLoggedIn}" value="Log Out" type="submit" action="#{loginBean.logoutUser}" > <f:ajax render="@form" /> </h:commandButton>
或一些始終呈現的常見包裝器組件:
<h:panelGroup id="group"> <h:outputText id="nodeL" value="Good Luck: #{userIdBean.userId}" style="font-weight:bold" rendered="#{userIdBean.isLoggedIn}" /> <br></br> <h:commandButton value="Submit" action="#{regBean.storeUserId}" /> <h:commandButton id="logOutButton" value="Log Out" action="#{loginBean.logoutUser}" rendered="#{userIdBean.isLoggedIn}"> <f:ajax render="group" /> </h:commandButton> <br></br> <h:outputText value="AJAX Response: #{userIdBean.userId}" rendered="#{userIdBean.isLoggedIn}" /> </h:panelGroup>
使用“ click
”事件而不是“ keyup
”,如下所示。
<f:ajax event="click" render="nodeL logOutButton"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.