jsf - ajax 渲染后 commandButton 处于非事件状态

Question

我对这两个命令按钮有疑问:加入和离开。

如果我点击离开，我想隐藏加入，反之亦然。

当我将 ajax 设置为 false 时，没有问题(但所有页面都刷新了，我发现这不是最佳选择)。

但是当 ajax 属性为 true 并进行特定更新时(请参阅代码中的注释)，呈现效果很好，但新按钮出现时变为非事件状态。如果我点击它，什么也没有发生(似乎是 actionListener 触发器，但 View 没有刷新，我必须手动刷新才能看到区别)

感谢阅读。

<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 中基本上是这样工作的:

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

但是，如果 JSF 组件由于 rendered="false" 而未生成其 HTML 表示，则 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>

另见:

• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?