commandButton inactive after ajax rendering

Question

I have a problem with these two commandButton : Join and Leave.

I want to hide Join if I click on leave and vice-versa.

When I put ajax on false, there is no problem (but all the page is refresh and I don't find this optimal).

But when ajax attribut is on true with specific updating (cf comment in the code), the rendering is good but the new button whitch appear become inactive. If I click on it, nothing happens (well it's seems the actionListener trigger but the view is not refreshed, I have to manual refresh to see the difference)

Thanks for reading.

<h:form id="formWaitingList" rendered="#{connexion.connected}" >
    <p:commandButton id="Join"  
                    actionListener = "#{connexion.joinWaitingList()}"
                    rendered="#{!connexion.waiting}"
                    ajax="false"
               <!-- ajax="true"
                    update="Join,Leave"-->
                    value="Join"/>

   <p:commandButton id="Leave" 
                    value="Leave"
                    ajax="false"
               <!-- ajax="true"
                    udpate="Join,Leave"-->
                    rendered="#{connexion.waiting}"
                    actionListener ="#{connexion.leaveWaitingList()}" />
</h:form>

Answer 1

您似乎并不完全熟悉 HTML/JavaScript。您知道，JSF 基本上是一个 HTML/JavaScript(/CSS) 代码生成器。Ajax 更新在JavaScript 中基本上是这样工作的：

• 通过 将 ajax 请求发送到 JSF 后XMLHttpRequest，检索一个 XML 响应，其中包含需要更新的所有元素及其客户端 ID。
• 对于每个要更新的元素，使用document.getElementById(clientId)在当前 HTML DOM 树中找到它。
• 用 ajax XML 响应中指定的新元素替换该元素。

然而，如果一个 JSF 组件因为 没有生成它的 HTML 表示rendered="false"，那么 HTML DOM 树中就没有任何东西可以被找到和替换。这完全解释了你“看到”的症状。

您基本上需要将有条件呈现的 JSF 组件包装在一个始终呈现HTML 表示的组件中，然后在 ajax 更新中引用它。

例如，

<h:form>
    ...

    <h:panelGroup id="buttons">
         <p:commandButton ... update="buttons" rendered="#{condition}" />
         <p:commandButton ... update="buttons" rendered="#{not condition}" />
    </h:panelGroup>
</h:form>

也可以看看：

• 当我想对它进行 ajax 更新时，为什么需要在另一个组件中嵌套一个带有 render="#{some}" 的组件？