Ajax渲染后，commandButton处于非活动状态 [英] commandButton inactive after ajax rendering

问题描述

我对这两个commandButton遇到问题:加入"和离开".

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

如果我单击请假，我想隐藏加入"，反之亦然.

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

当我将ajax设置为false时，没有问题(但是所有页面都是刷新的，我没有找到最佳选择).

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

但是当ajax属性在特定更新下为true(参见代码中的注释)时，呈现效果很好，但是新的按钮提示变为无效.如果单击它，则什么也没有发生(好象是actionListener触发器，但是视图没有刷新，我必须手动刷新才能看到区别)

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)

感谢阅读.

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

推荐答案

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

It seems that you're not entirely familiar with HTML/JavaScript. You know, JSF is basically a HTML/JavaScript(/CSS) code generator. Ajax updating works basically like this in JavaScript:

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

• After sending the ajax request to JSF via XMLHttpRequest, retrieve a XML response which contains all elements which needs to be updated along with their client IDs.
• For every to-be-updated element, use document.getElementById(clientId) to find it in the current HTML DOM tree.
• Replace that element by new element as specified in ajax XML response.

但是，如果JSF组件由于rendered="false"而没有生成其HTML表示形式，则HTML DOM树中没有任何内容可以找到和替换.这完全可以解释您正在看到"的症状.

However, if a JSF component has not generated its HTML representation because of rendered="false", then there's nothing in the HTML DOM tree which can be found and replaced. That totally explains the symptoms you're "seeing".

您基本上需要将有条件渲染的JSF组件包装在始终表示 表示HTML的组件中，然后在ajax更新中对其进行引用.

You basically need to wrap conditionally rendered JSF components in a component whose HTML representation is always rendered and then reference it instead in the ajax update.

例如，

<h:form>
    ...

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

另请参阅:

这篇关于Ajax渲染后，commandButton处于非活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！