JSF 2.0 AJAX re-renders more than the IDs I specify. Not sure if I have a fundamental misunderstanding or just a bug
Question
When I click on the logOutButton it seems as though it's re-rendering the ajaxR element also. I would expect it to only re-render the IDs I have in the f:ajax render attribute. Or maybe it's re-rendering the whole page. The question is, why's it rendering the ajaxR element and/or the whole page and not just the IDs I've specified.
To make sure I'm clear: when I click on the logout button, the ajaxR element does not get rendered because of rendered="#{userIdBean.isLoggedIn}".
<!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>
Here's a snippet of the bean code.
public String logoutUser(){
userIdBean.setIsLoggedIn(false);
userIdBean.setUserId(null);
return null;
}
2 answers
solution1
1 ACCPTED 2012-04-10 12:48:39
You have two mistakes in the code:
The
<f:ajax event>in anUICommandcomponent like<h:commandButton>must be set toaction. You can also just leave theeventattribute altogether away, it will then default to a sane default (which isactionfor command components andvalueChangefor input components).<h:commandButton id="logOutButton" rendered="#{userIdBean.isLoggedIn}" value="Log Out" type="submit" action="#{loginBean.logoutUser}" > <f:ajax render="nodeL logOutButton"/> </h:commandButton>The
<f:ajax render>client ID should refer a component which is always rendered to the client side. It will then be exactly the HTML representation of that component which will be updated by JavaScript. If the HTML representation of that component is not JSF-rendered to the client side because therenderedof the component isfalse, then JavaScript has nothing to find and update and in effect "nothing" will happen. Set it to for example@formwhich indicates the entire form:<h:commandButton id="logOutButton" rendered="#{userIdBean.isLoggedIn}" value="Log Out" type="submit" action="#{loginBean.logoutUser}" > <f:ajax render="@form" /> </h:commandButton>or some common wrapper component which is always rendered:
<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>
solution2
0 2012-04-09 03:50:17
Use " click " event instead of " keyup " as below.
<f:ajax event="click" render="nodeL logOutButton"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.