Home/ Questions/Q 7760219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:49:29+00:00

When I click on the logOutButton it seems as though it’s re-rendering the ajaxR

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0