Conditionally disabling a 2nd commandbutton on panel?

[karlkras]

Hopefully I can explain this well enough to get my problem across fully.

I have a form with two command buttons, one is a submit button, the other is a cancel button (cancel button is to reset the form data back to default settings, not to cancel the submit action).

Bottom line is when the user selects the submit button I need to disable the Cancel button for the duration of the submit process because bad things can happen if these should run concurrently.

I've attempted using the disabled tag to look for a changed property when the submit button action is hit, but apparently the reRender on the panel doesn't happen until after the submit action is complete (would make sense)...

So how should I be doing this? Would seem to be a pretty obvious need.

thanks for any help...

~Karl

[ilya40umov]

Try this solution:

<h:form id="form1">

<a4j:commadButton action="#{bean.submit}" onclick="#{rich:component('cancelButton')}.disable();" oncomplete="#{rich:component('cancelButton')}.enable();"/>

<a4j:commadButton id="cancelButton" action="#{bean.cancel}" oncomplete="closeModalPanel();"/>

</h:form>

If it won't work try with

document.getElementById('form1:cancelButton').disabled = true/false;

[karlkras]

Hi IIya,

Thanks for your reply.

I tried something similar to this, but what I need to do is synchronize the submit and cancel button enabled state on the same onclick event, so it would essentially require (at least in my assessment) the ability to perform 2 such calls for each event, e.g.,

<h:form id="form1">

<a4j:commadButton action="#{bean.submit}" onclick="this.disabled=true;#{rich:component('cancelButton')}.disable();" oncomplete="this.disabled=false;#{rich:component('cancelButton')}.enable();"/>

<a4j:commadButton id="cancelButton" action="#{bean.cancel}" oncomplete="closeModalPanel();"/>

</h:form>

I try this (and other attempts at properly identifying the controls, for example:

<h:form id="form1">

<a4j:commadButton action="#{bean.submit}" onclick="this.disabled=true;document.getElementById('form1:cancelButton').disabled=true" oncomplete="this.disabled=false;

document.getElementById('form1:cancelButton').disabled=false"/>

<a4j:commadButton id="cancelButton" action="#{bean.cancel}" oncomplete="closeModalPanel();"/>

</h:form>

) and it renders the submit button completely inoperative (well, using example B above the disable of the submit button does occur, but that's all it does), implying that either the oncomplete and onclick elements aren't capable of handling multilple instructions or something is wrong in my script reference, though I would be at a loss as to how. At any rate it ain't doing it.

[ilya40umov]

1) Try to add ";" after each of your js commands.

onclick="this.disabled=true;document.getElementById('form1:cancelButton').disabled=true;"

2) Please describe why disabled=false does not match your requirements.

[karlkras]

Well, on further debugging it would appear that at fault is my reference to the cancel button from the context of the Submit button. So I do this:

<h:form id="form1">

<a4j:commadButton action="#{bean.submit}" onclick="#{rich:component('cancelButton')}.disable();" oncomplete="#{rich:component('cancelButton')}.enable();"/>

<a4j:commadButton id="cancelButton" action="#{bean.cancel}" oncomplete="closeModalPanel();"/>

</h:form>

(I've also attempted using the "native" document.getElement ... approach and it does the same thing)

and the form just hangs. No action processed, no nothing. Any suggestions on how to determine why this might be incorrect? I have the target button defined as this:

<a4j:commandButton id="cancelButton"

                   value="Cancel"

                   action="#{myBean.cancel}"

                   onclick="this.disabled=true"

                   oncomplete="this.disabled=false" />

[ilya40umov]

Accordigly to this document:

http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_commandButton.html

It should work fine.

1) Does it work the same on all the browsers?

2) Look at the html code of your a4j:commadButton

3) Post the code of #{bean.submit}

4) Post a sample of your xhtml

[karlkras]

well, I'll do you one better. Here's a basic example app that shows it failing:

http://cyclemaniaque.com/dws/ButtonEnabler.zip

The war is in the dist directly. The build was setup on Netbeans if you want to build it directly. Pretty darn basic, and it clearly isn't working.

It was testing built against rf 3.3.2

[ilya40umov]

Well. First of all why are you re-rendering footerPanel by this line reRender="footerPanel"? The whole footerPanel will be re-rendered with all the nested elements.

The second problem:

document.getElementById('cancelButton').disabled=false won't work because there is no such element with id = cancelButton.

It should be "enablerTesterForm:cancelButton"

[karlkras]

Hi Ilya,

crap(tm), now I see it. For some reason I didn't get the colon notation instead of the period between the enablerTesterForm:cancelButton so, yes... a dumb syntax mistake on my part and could have easily spotted if I had actually looked at the generated HTML. It didn't matter whether I used the fully qualified id or not (which I had tried). By using the '.' it was simply wrong.

The reRender directive was a residual from the original code I had boiled down for this demo and is of no consequence (at least in my assessment), it was the use of the . rather the : that broke my process. Thanks for your help!