命令按钮ajax渲染后不活动

Question

我有这两个commandButton的问题：加入和离开。

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

当我把阿贾克斯假，没有问题（但所有的页面刷新，我没有找到最佳）。

但是，当ajax attribut在特定更新时为true（参见代码注释），渲染效果很好，但出现的新按钮变为非活动状态。如果我点击它，什么都没有发生（好像它似乎是actionListener触发器，但视图没有刷新，我不得不手动刷新以查看区别）

感谢您的阅读。

<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发送Ajax请求到JSF后，检索其包含需要与自己的客户端ID一起更新的所有元素XML响应。
• 对于每个要更新的元素，请使用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?