CODEWITHSUNDEEP
javajsf
Dale
Dale

Reputation: 1301

JSF 2.0 AJAX re-renders more than the IDs I specify. Not sure if I have a fundamental misunderstanding or just a bug

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;
    }

Upvotes: 0

Views: 1185

Answers (2)

BalusC
BalusC

Reputation: 1108632

You have two mistakes in the code:

  1. The <f:ajax event> in an UICommand component like <h:commandButton> must be set to action. You can also just leave the event attribute altogether away, it will then default to a sane default (which is action for command components and valueChange for input components).

    <h:commandButton id="logOutButton" rendered="#{userIdBean.isLoggedIn}" value="Log Out" type="submit" action="#{loginBean.logoutUser}" >
    <f:ajax render="nodeL logOutButton"/>
</h:commandButton>

  2. 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 the rendered of the component is false, then JavaScript has nothing to find and update and in effect "nothing" will happen. Set it to for example @form which 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>

Upvotes: 1

prageeth
prageeth

Reputation: 7395

Use "click" event instead of "keyup" as below.

<f:ajax event="click" render="nodeL logOutButton"/>

Upvotes: 0

Related Questions