RichFacesPleaseWaitBox

How to show a "Please Wait" box and block the input while the Ajax request is processed

 

You can use a combination of a4j:status and rich:modalPanel. This is a code snippet:

 

 

<a4j:status onstart="Richfaces.showModalPanel('ajaxLoadingModalBox',{width:450, top:200})" 
     onstop="Richfaces.hideModalPanel('ajaxLoadingModalBox')"></a4j:status>
....

<rich:modalPanel id="ajaxLoadingModalBox" minHeight="200" minWidth="450" 
        height="100" width="250" zindex="2000">
     <f:facet name="header">
          <h:outputText value="Request being processed"></h:outputText>
     </f:facet>
     <h:outputText value="Your request is being processed, please wait."></h:outputText>
</rich:modalPanel> 

 

You can also set timeout before showing modal panel. This example is for timeout 500 ms:

 

<script type="text/javascript">
     var infoWindowAMShown = false;
     var infoWindowAMTimer;
     function showModalInfoWindow()
     {
          infoWindowAMTimer = setTimeout("if(!infoWindowAMShown){Richfaces.showModalPanel('ajaxLoadingModalBox');infoWindowAMShown=true;}", 500);
     }
     function hideModalInfoWindow()
     {
          if (infoWindowAMShown){Richfaces.hideModalPanel('ajaxLoadingModalBox');infoWindowAMShown=false;}else{if(infoWindowAMTimer)clearTimeout(infoWindowAMTimer);}
     }
</script>


<a4j:status onstart="showModalInfoWindow();" 
     onstop="hideModalInfoWindow()"></a4j:status>
....

<rich:modalPanel id="ajaxLoadingModalBox" minHeight="200" minWidth="450" 
        height="100" width="250" zindex="2000">
     <f:facet name="header">
          <h:outputText value="Request being processed"></h:outputText>
     </f:facet>
     <h:outputText value="Your request is being processed, please wait."></h:outputText>
</rich:modalPanel> 

 

-


Source: Jboss RichFaces forum