Disable `<h:commandButton>` after clicked, but action should be fired

javascript jsf ajax4jsf
prageeth picture prageeth · Oct 29, 2012 · Viewed 16.1k times · Source

I have a <h:commandButton> in my XHTML page. I want the button to be disabled as soon as I click the button. Then the button should call the action. My button gets disabled as I expect but the problem is that the action is not fired.
<h:commandButton value="Go" onclick="this.disabled=true" action="#{bean.go()}"/>

But if I remove the onclick attribute the action is fired.

Or if I used an <a4j:commandButton> it works.
Following a4j button works.
<a4j:commandButton value="Go" onclick="this.disabled=true" action="#{bean.go()}"/>

How can I disable a <h:commandButton> after being clicked, so that the action still fires?

Answer

Daniel picture Daniel · Oct 29, 2012

Use setTimeout , that way the action will be fired and the button will be disabled...

<h:commandButton value="Go"
   onclick="setTimeout('this.disabled = true;', 50);" 
   action="#{bean.go()}"/>

You can also take a look at the following question too :How can I disable an h:commandButton without preventing the action and actionListener from being called?

Related questions

How to use <a4j:jsFunction><a4j:actionparam>

I'm trying to use: <script type="text/javascript"> function myfunc() { var param = 4; alert("OK"); } </script> I call the function like this: <a4j:jsFunction name="myfunc"> <a4j:actionparam name="param" assignTo="#{MyBean.…

Read More
The entity name must immediately follow the '&' in the entity reference

I want to put a packman game on my *.xhtml page.(I am using jsf 2 and primefaces 3.5) However, when I "translated" the html page in xhtml I get an error at this script: <script> var el = document.getElementById("…

Read More
Error parsing XHTML: The content of elements must consist of well-formed character data or markup

As an extension of this question, I'm trying to insert Javascript to a <h:commandButton />'s onclick property as action is already rendering an ajax table. What I want to do: Get the selected items in a list …

Read More