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>

You should use update="@form" for this case because `buttons` with rendered=false doesn't appear in the html generated code, so you can not updated them directly. — danRod, Jul 07 '13 at 17:19

score 5 · Accepted Answer · edited May 23 '17 at 10:29

5

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:

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.

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

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.

For example,

<h:form>
    ...

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

See also:

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

edited May 23 '17 at 10:29

Community

1
1

answered Jul 07 '13 at 17:31

BalusC

1,082,665
372
3,610
3,555

Ohhh great it's working fine ! I've seen one of your post about wraping with a panel but instead of wraping only the buttons, I wrapped the form too ><. Thanks you ! – Nicolas Unknoown Jul 07 '13 at 18:25
@BalusC Hi BalusC, I have a question about this if you don't mind. I was playing around with the OP code just now (new to ajax too) and I did this `` (button #2 has a separate `rendered` value). In the action listener for button #1 I was setting the `rendered` attribute of the second button to true and the first one to false. The second button did show up but the `actionListener` was never fired when I clicked. Why is that ? – Andy Jul 08 '13 at 05:07
@BalusC I'm not seeing the complete picture I guess. From your answer, what I understand is if `rendered` is false, there's no HTML generated for button #2 so it will never update because...well it's not there in the first place, but in my case button #2 did show up... I'll stop here. If my answer is to vague/confusing please let me know and I'll post an official question. Thank you. – Andy Jul 08 '13 at 05:09
@Andy: the condition needs to be view scoped. See also point 5 of http://stackoverflow.com/questions/2118656/hcommandlink-hcommandbutton-is-not-being-invoked/2120183#2120183 – BalusC Jul 08 '13 at 11:28
@BalusC It is view scoped :(. Let me reread this these two answers again. – Andy Jul 08 '13 at 12:46
@BalusC I'm so confused. I have been researching all morning. I'll keep at it and post an actual question if I can't figure this out by tonight. Thanks a lot. – Andy Jul 08 '13 at 17:52

commandButton inactive after ajax rendering

1 Answers1

Linked