How can I disable an h:commandButton without preventing the action and actionListener from being called? [duplicate]

Answer 1

I understand that your concrete problem is that the backing bean's action isn't been invoked once you disable the button? That can be very true. JSF determines the to-be-invoked action based on the presence of the request parameter name associated with the HTML representation of the UICommand component. However, when a HTML input/button element is disabled, then its name=value won't be sent as request parameter at all (and thus JSF won't be able to determine the to-be-invoked action). The onclick attribute is namely invoked right before the form submit request is been sent.

You'd like to disable the button after the form submit request has been sent to the server side. With the code given so far, the only way would be to call button.disabled=true after a timeout of ~50ms.

<h:commandButton ... onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);" />

If you're however using JSF 2.0 <f:ajax>, then there's another, more robust and global, way:

function handleDisableButton(data) {
    if (data.source.type != "submit") {
        return;
    }

    switch (data.status) {
        case "begin":
            data.source.disabled = true;
            break;
        case "complete":
            data.source.disabled = false;
            break;
    }    
}

jsf.ajax.addOnEvent(handleDisableButton);

In the cases where it worked for you, the button was most likely an ajax-enabled button. Disabling the button beforehand has no side effects.

Answer 2

You should be setting the enabled status of the commandButton component from the server side actionListener after the click event.

<h:commandButton disabled="#{managedBean.someBooleanPropertyThatWasToggledInTheEvent}" />

You can simply set the managed property after invoking your server side event and it will be disabled on the page refresh.

UPDATE:

I just realized that the OP has a completely different issue. Users are impatient and clicking the button and not waiting for the postback. Disabling the command button however will sometimes prevent the server side actions from being invoked.

The correct way to resolve this is to put an absolute position div overlay across the page with a higher z-index than any other element on the page. This will prevent further clicks from occurring on anything but the overlay div. Here is an example:

CSS style

.div-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

Javascript toggle function utilizing jQuery fadeToggle functionality

function toggleLoadingOverlay() {
  var div = jQuery('.div-overlay');
  div.fadeToggle(150);
}

** JSF commandButton onclick event that will occur once the button is clicked (and assuming that event propogation has not been interrupted)**

<h:commandButton onclick="toggleLoadingOverlay();" action="..." />

Answer 3

I tried the solution suggested by @maple_shaft, but the opaque/toggleFade() div always absorbed keystrokes even when it was opacity=0. Here's my answer:

<script type="text/javascript">
    function overlayToFront()
    {
        document.getElementById("div-overlay").style.zIndex = "10000";
    }
</script>

page:

<... id="form1"> <!-- in the existing code, some component with id="form1" in my case it was a:form -->
    <div id="div-overlay" 
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000;
            filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0;
            z-index: -10000; cursor: wait;">
        <!-- lay out a transparent div in the background.
        Buttons with onclick="overlayToFront();" can prevent double-clicks by covering the whole GUI when this div gets moved to the front
        Currently only used in one place, but any button with reRender="form1" should be able to to this
        -->
    </div>
    <div id="div-base-layer"
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000;
            filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0;
            z-index: -1;" > <!-- rendered "on top of" div-overlay, so cursor does not change when moving off the legacy part of the page -->
    </div>
    <div>
        <!-- this is where the legacy part of the page, the contents of the component with id="form1" goes. it did not have a position: attribute in the original code so z-index does not affect it -->
    </div>
</ ...> <!-- end of tag with id="form1"  -->