Creating “Please wait” with RichFaces modal panel

Showing user a modal “Please wait” or “Working” dialog is a good way to prevent him or her clicking a button more than once. It can be easily done in RichFaces by combining a4j:status and rich:modalPanel tags.

<h:form>
   <a4j:commandButton value="Do something" 
      action="#{bean.dosomething}"
      status="ajaxStatus"/>
</h:form>
 
<a4j:status id="ajaxStatus"
   onstart="#{rich:component('waitPanel')}
      .show('',{top:'40px', left:'80px',height:'100px', width:'200px'})"
   onstop="#{rich:component('waitPanel')}.hide()" />
 
<rich:modalPanel id="waitPanel" style="text-align:center">
   <h:outputText value="Please wait..."
      style="font-weight:bold;font-size:large" />
</rich:modalPanel>

When the button is clicked, a4j:status is executed. Instead of showing some text or animated image, we use onstart event to open a modal panel. While Ajax request is executing on the server, the modal panel is active and prevents clicking anything on the page. When the request is done, onstop event on status is called and hides the modal panel.

Short and neat, right?