Prevent multiple clicks on ajax4jsf command button

One of the problems with implementing an ajax4jsf command button on your site is that it gives the user the ability to submit the button as many times (and as quickly) as they can click the button. If the ajax4jsf button is tied to an action that performs intensive work on the backend, this could seriously hamper performance. A quick way to prevent this is to disable the button when it is clicked and the re-enable it when the action finishes. The ajax4jsf command button actually provides a quick and easy way to do this.



oncomplete=”this.disabled=false” action=”…”/>

This will disable the button as soon as the action is fired and enable it once the action completes.

*** Correction *** See comment from Sergey Smirnov below. My mistaken assumption was based on me misreading the cause of the behavior. It turns out that my commandButton is actually located inside an ajax4jsf outputPanel that is being re-rendered. I’m guessing that it is the re-rendering of the panel that is enabling the button after I had disabled it.

Due to the advancement in the technology communications throughout the world has become very fast and easy. People are now communicating with each other not only via telephone but also through internet. The new technology used in this respect is broadband phone service. Many companies are using services like voip calling services to communicate around the globe. They have to install internet voip software to implement this over the network. There is much software which supports voip calls. You can get this free from internet. The example of this is skype phone software.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati

One Response to “Prevent multiple clicks on ajax4jsf command button”

  1. Sergey Smirnov Says:

    Unless you met the miracle, this code should not work.
    oncomplete is invoked asynchronously. Actually, its invocation is delegated to the XMLHTTPRequest object. So, at the moment of invocation, ‘this’ references to XMLHTTPRequest object, but not to the button.

    The following code should work:
    onclick=”window.mybtn=this;mybtn.disabled=true”
    oncomplete=”mybtn.disabled=false”

    This is as simple as possible. The global variable is used. If the button is inside any iterator you need to avoid re-definition using more ’sophisticated’ code. However, the idea is the same - saving the reference to the object and then using it.

Leave a Reply