Version 4

     

       The <a4j:queue> provides 2 JavaScript API functions getSize() and getMaximumSize().The fist one can be very handy to prevent the user from generating too many Ajax requests at a time. Let emulate this situation with the following code:

    <h:form>
         <a4j:queue oncomplete="showthequeuenumber(request.queue.getSize())" requestDelay="500" />
              <h:inputText value="#{queue.a}" />
                   <a4j:support reRender="a" event="onkeyup" />
                   <a4j:support reRender="a" event="onkeydown" />
               <h:outputText value="#{queue.a}" id="a" />
     </h:form>
    

                                       

      The two <a4j:support/> emulate requests from 2 events onkeyup and onkeydown.

    To see whether the requests are sent to the server let’s use the <a4j:status>.

    <a4j:status>
         <f:facet name="start">
              <h:graphicImage value="/img/ai.gif" />
         </f:facet>
    </a4j:status>
    

    The ai.gif image is attchated if you want to reproduce .

                                       

    The modal panel to dim the page and forbid the user to perform further action before all requests are sent to the server.  Let's also display the nuber of requestion in the queue.

    <script>
    function showthequeuenumber(qn){
    var queue = parseInt(qn);     
    document.getElementById('showthequeue').innerHTML=queue;
    if (queue > 20){     
    
    Richfaces.showModalPanel('panel');
    
    }
    else{
         Richfaces.hideModalPanel('panel');
         }
    }
    </script>
    <div id="showthequeue"></div>
    <rich:modalPanel id="panel">
    <h:graphicImage value="/img/ai.gif" />
    <p>Too many requests to the server please wait for a while.</p>
    </rich:modalPanel>
    

    See the screen shot attached.