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

Question

We have radio buttons and an ajax call to change the value of the switch.

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

If the user selects a different value, there is a delay in the ajax call, and at the same time, users click the submit button and empty values ​​are sent to the backend (since the fields are not displayed on the page).

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

Answer 1

Yes, of course there is. You only need to change the command link using the command button, because the JSF link is not trivially indispensable with JS tools. You could throw some CSS if necessary to make the button look better.

After that, you can use <f:ajax onevent> to listen for ajax events. When running an ajax request, you can simply disable the command button. If the ajax request is successful, you can simply reactivate the command button.

So, given this example of listening for an event function,

 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, in short, but perhaps harder to interpret for beginners:

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

You can fulfill the required requirement as follows:

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