JSF 2.0 AJAX 重新呈现超过我指定的 ID。不确定我是否有根本性的误解或只是一个错误

Question

When I click on the logOutButton it seems as though it's re-rendering the ajaxR element also.当我单击 logOutButton 时，它似乎也在重新呈现 ajaxR 元素。 I would expect it to only re-render the IDs I have in the f:ajax render attribute.我希望它只重新呈现我在 f:ajax 呈现属性中的 ID。 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.问题是，为什么它呈现 ajaxR 元素和/或整个页面，而不仅仅是我指定的 ID。

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}".为确保我清楚：当我单击注销按钮时，由于 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>

Here's a snippet of the bean code.这是 bean 代码的一个片段。

public String logoutUser(){
        userIdBean.setIsLoggedIn(false);
        userIdBean.setUserId(null);
        return null;
    }

Answer 1

You have two mistakes in the code:你在代码中有两个错误：

The <f:ajax event> in an UICommand component like <h:commandButton> must be set to action .像<h:commandButton>这样的UICommand组件中的<f:ajax event>必须设置为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).您也可以完全不使用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>
```
The <f:ajax render> client ID should refer a component which is always rendered to the client side. <f:ajax render>客户端 ID 应该引用始终呈现给客户端的组件。 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.然后它将恰好是该组件的 HTML 表示，该表示将由 JavaScript 更新。如果该组件的 HTML 表示不是 JSF 呈现给客户端，因为该组件的rendered是false ，那么 JavaScript 找不到任何东西，并且更新，实际上“什么都没有”会发生。 Set it to for example @form which indicates the entire form:将其设置为例如@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>
```

Answer 2

Use " click " event instead of " keyup " as below.使用“ click ”事件而不是“ keyup ”，如下所示。

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

JSF 2.0 AJAX 重新呈现超过我指定的 ID。不确定我是否有根本性的误解或只是一个错误

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-04-10 12:48:39

解决方案2
0 2012-04-09 03:50:17

JSF 2.0 AJAX 重新呈现超过我指定的 ID。 不确定我是否有根本性的误解或只是一个错误

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-04-10 12:48:39

解决方案2 0 2012-04-09 03:50:17

JSF 2.0 AJAX 重新呈现超过我指定的 ID。不确定我是否有根本性的误解或只是一个错误

解决方案1
1 已采纳 2012-04-10 12:48:39

解决方案2
0 2012-04-09 03:50:17