How to disable and enable a command button on click of another command button?

Question

I have 2 command buttons as shown,

            <h:commandButton action="#{beanOne.getRefreshData}"
                    image="images/refresh_data.png" alt="#{messages.refresh}"
                    style="margin-top:8px" />

            <h:commandButton action="#{beanTwo.resetFilter}" id="resetFilterBtn"
                    disabled="#{beanOne.disabledBtn}"
                    image="images/reset-filter.png" alt="#{messages.reset_filter}"
                    style="margin-top:8px;margin-left:5px" />

where refresh data functionality which needs to be invoked in the Application Logic Phase is as such,

public String getRefreshData() throws Exception {
    try {
      LOG.debug("In class OneBean :  getRefreshData()");
      setDisabledBtn(true);

      // Some business logic code goes here


    } catch (Exception e) {
      throw e;
    }
    finally{

    }
    return IConstants.SUCCESS;
  }

enter image description here

The RESET FILTER button needs to be disabled as soon as user clicks on REFRESH DATA and after the refresh data functionality has been processed in the backing bean, only then it(RESET FILTER) needs to be enabled.
Any suggestions?

BalusC · Accepted Answer · 2015-07-07 12:47:01Z

3

So, you want to disable it before the request is sent. Your current attempt only disables it after the response associated with the request is returned. This is indeed too late.

Throw some JavaScript into the game to achieve that.

<h:commandButton ... onclick="document.getElementById('form:resetFilterBtn').disabled=true" />

<h:commandButton id="resetFilterBtn" ... />

It will "automagically" be re-enabled when the page refreshes as response to the form submit request. In case you're actually using ajax, then make sure that the disabled button is covered by ajax update.

Update

As per comments, I just used this form and bean on a further blank project with most minimal configuration (and only one dummy image file).

<h:form id="form">
    <h:commandButton id="one" image="test.png" action="#{bean.sleep}"
        onclick="document.getElementById('form:other').disabled=true" />
    <h:commandButton id="other" image="test.png" action="#{bean.sleep}" />
</h:form>

@ManagedBean
@RequestScoped
public class Bean {
    public void sleep() throws Exception {
        Thread.sleep(2000);
    }
}

To be sure, I also added this CSS to the test page because it was in Firefox not immediately visually visible if the button was disabled (although it was visible in the DOM inspector):

<style>input[disabled] { border: 5px solid red; }</style>

It also works properly.

edited Jul 7, 2015 at 12:47

answered Jul 7, 2015 at 10:58

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

27 Comments

Farhan stands with Palestine Over a year ago

Nothing happened as suggested. Even the button was not disabled even though the correct Javascript was there.

BalusC Over a year ago

Are you familiar with JavaScript's getElementById()? It will only work if there's a HTML element with exact ID of form:resetFilterBtn. The exact ID cannot be derived based on the information provided so far, so I had to use an example value.

Farhan stands with Palestine Over a year ago

Yes, I am familiar. This appears in the generated HTML, onclick="var cf = function(){document.getElementById('plateOverForm:resetFilterBtn').disabled=true};var oamSF = function(){if(typeof window.getScrolling!='undefined'){myfaces.oam.setHiddenInput('plateOverForm','autoScroll',getScrolling());}};return (cf.apply(this, [])==false)? false : oamSF.apply(this, []); "

BalusC Over a year ago

Sorry, problem is not visible in information provided so far.

Farhan stands with Palestine Over a year ago

I cross check it with IE8. Any suggestions on why your approach works fine with IE and not with Mozilla Firefox.

|

Collectives™ on Stack Overflow

How to disable and enable a command button on click of another command button?

1 Answer 1

27 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

27 Comments

Your Answer

Sign up or log in

Post as a guest

Related