Button Action Delay

[benpad]

Hi.

Is there a way how to delay the action of a button? Let's say I have a form with text boxes and a button inside it. If I clicked the button multiple times (quickly), the button won't wait for the response to send another submit action.

Thanks.

[leofigs]

I guess you can disable the button with javascript on the first click if thats the case.

And if it is a ajax button you can try using the p:commandButton onclick and oncomplete to disable and then enable again after response.

[cagatay.civici]

Note that every ajax request is queued, so an ajax request will be sent once the previous one gets it's response.

[benpad]

Let's say I have this form.

Code: Select all

<h:form>

<h:inputText value="#{myBean.specialValue}"/>
<p:commandButton value="Add" actionListener="#{myBean.addSomething}" />

</h:form>

The addSomething method consist of:

Code: Select all

public void addSomething() {
	myList.add(specialValue);
	
	// Clear the specialValue
	specialValue = "";
}

If you click the button multiple times very quickly, the specialValue gets added multiple times too with the same value. Is there a better way to eliminate the multiple request to the backing bean?

Even if I put specialValue = "", the value is still the same.

[Oleg]

Hi,

How Cagatay said Ajax request are queued per default - an Ajax request will be sent once the previous one gets it's response. You can show an overlay with a loading indicator as peventation for multiply submittions. Sure, you still can do multiply clicks, but it's a problem of user. He may do it. If specialValue stays the same you add the same value in the addSomething() method. That's so.

[xeo]

Benpad maybe it would be usefull for you...

Code: Select all

<p:commandButton  image="search" widgetVar="buttonSearch" id="buttonSearch" async="true"
                                      actionListener="#{equipoMed.updateListEM}" immediate="true" 
                                      onclick="buttonSearch.disable()" oncomplete="buttonSearch.enable()"
                                      update="buttonSearch ajaxStatus listaEM resultSearch"
                                      value="Generar Lista de Resultados">
                    </p:commandButton>