incompatible p:commandButton with updating values in xhtml file

Question

Today I have spent all day trying to understand why values in xhtml file were not updated after calling a bean from a <p:commandButton>.

After I changed the p:commandButton for h:commandButton everything worked fine. This is how I declared the commandButton:

<p:commandButton id="b1" style="height: 30px; width: 30px;" value="a"
    action="#{turnoController.createTurno('a')}"
    onclick="document.getElementById(this.id).disabled=true;"/>

With this command button it refreshes but I dont know how to disable it.

<h:commandButton id="b1" style="height: 30px; width: 30px;" value="a"
    action="#{turnoController.createTurno('a')}"/>

I want to ask why is the p:commandButton incompatible with "refreshing" the values of the page???

What I want to do is to turn the buttons disabled after clicking but also to update all values...

How can I make it in xhtml+jsf???

Try using `update="@form"` and `oncomplete="document.getElementById(this.id).disabled=false;"`. — Luiggi Mendoza, Jun 03 '13 at 00:53
I've post an answer in your so long previous question treating this problem also. — Luiggi Mendoza, Jun 03 '13 at 14:01

score 0 · Accepted Answer · edited May 23 '17 at 12:11

onclick is not incompatible with refreshing values of the page. The reason the update is failing is that your onclick function probably ends up setting the <p:commandButton disabled="true"/> before the request gets to the APPLY_REQUEST_VALUES phase. This is the phase in the JSF lifecycle where component properties are evaluated and stored as part of the component's personal map of attributes

A property with disabled="true" will be ignored by JSF during processing and that's the result you're observing. onclick is simply too early to disable the button.

Use ajax to update the button's disabled property to save yourself the stress:

<p:commandButton id="b1" style="height: 30px; width: 30px;" value="a"
               action="#{turnoController.createTurno('a')}" disabled="#{bean.isButtonEnabled}" >
  <f:event name="postValidate" listener="#{bean.disableButton}"/>
</p:commandButton>

Where buttonEnabled is a property you'll define on your managed bean and disableButton is a method in your managed bean that toggles the state of the buttonEnabled variable. I've chosen the postValidate event phase of the component because it's after the APPLY_REQUEST_VALUES JSF phase and it's safe to assume disabling your button at this point will have no negative effects.

As an alternative, you could try the following option, if you're interested in a client-side only solution:

How to prevent from user from clicking button twice(JSF command button not performing action if onclick property specified)

I'm doing it your way... but I have a little question: how do I recognize in the bean which button is calling??? — dak, Jun 03 '13 at 14:50
I've found a very simple way to set the disabled option... thanks for the idea!!!!! — dak, Jun 03 '13 at 15:06
@dak, please share here. You can retrieve the calling button by adding an argument of type `ComponentSystemEvent` to the `disableButton` method and calling `getComponent` on the argument — kolossus, Jun 03 '13 at 15:33

incompatible p:commandButton with updating values in xhtml file

1 Answers1