All geek questions in one place

Disable / enable command button in ajax event

I want to disable the command button below as soon as it gets in and turn it on as soon as the event listener is started and msg1 is displayed.

<h:commandButton value="Submit"> <f:ajax execute="@form" render="msg1" listener="{bean.method}" /> </h:commandButton>

How can i do this?

UPDATE: I found out that I can attach the onclick event to the commandButton element itself to disable it. How can I detect that the listener method has returned so that I can turn on the button again?

+4
source share
2 answers

You can do this with the onevent attribute <f:ajax> , which points to a JavaScript function that handles JAF Ajax events.

eg:.

 <h:commandButton value="Submit"> <f:ajax execute="@form" render="msg1" listener="#{bean.method}" onevent="handleDisableButton" /> </h:commandButton>

(note that I fixed the invalid EL in the listener )

with this js:

 function handleDisableButton(data) { var buttonElement = data.source; // The HTML DOM element which invoked the ajax event. var ajaxStatus = data.status; // Can be "begin", "complete" and "success". switch (ajaxStatus) { case "begin": // This is called right before ajax request is been sent. buttonElement.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 when ajax response is successfully processed. buttonElement.disabled = false; break; } }
+5
source

If you use richfaces, a4j: commandButton has a status attribute that prevents this.

0
source

Source: https://habr.com/ru/post/1379547/

More articles:


All Articles