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
Comments