Is there a way to disable the command link until the ajax response is rendered

Question

We have radio buttons and ajax call for change in value of the radio button.

<h:selectOneRadio id="name" value="#{nameTO.suffix}">           
        <f:ajax render="fname lname"/>
        <f:selectItems value="#{optionValues['suffix']}" />
</h:selectOneRadio>

If user selects a different value there is a delay in the ajax call and in the mean time users clicks submit form and empty values are being passed to the backend (as fields did not appear on the page).

Is there a way to disable the command link until the ajax response is rendered?

score 1 · Accepted Answer · answered Jul 19 '13 at 13:34

Yes, certainly there is. You only need to change the command link by a command button, because a JSF command link is not trivially disablable by JS means. You could if necessary throw in some CSS to make the button look like better.

Once done that, you could make use of <f:ajax onevent> to listen on ajax events. On begin of the ajax request, you could just disable the command button. On success of the ajax request, you could just re-enable the command button.

So, given this event function listener example,

function handleDisableButton(data) {
    var button = document.getElementById("formId:buttonId");

    switch (data.status) {
        case "begin": // This is called right before ajax request is been sent.
            button.disabled = true;
            break;

        case "complete": // This is called right after ajax response is received.
            // We don't want to enable it yet here, right?
            break;

        case "success": // This is called right after update of HTML DOM.
            button.disabled = false;
            break;
    }
}

Or, shorter, but perhaps harder to interpret for starters:

function handleDisableButton(data) {
    document.getElementById("formId:buttonId").disabled = (data.status != "success");
}

You can perform the desired requirement as follows:

<f:ajax ... onevent="handleDisableButton" />

Is there a way to disable the command link until the ajax response is rendered

1 Answers1

Linked