3 Replies Latest reply on Mar 4, 2009 1:28 PM by Patrick Madden

    What is best practice - long running ajax - disabling page?

    Patrick Madden Newbie

      Hi, I'm looking for a best practice approach to disabling an entire page while a long running process takes place.

      When I say long running I'm talking up to 30 seconds. Should I pop up a modal panel and listen for backend events etc or should I use the new queue support etc?

      Is there any way to disable all input on a JSF/RichFace/Seam page while an ajax request is occurring?

      Any help is greatly appreciated.

      Thanks,

      PVM

        • 1. Re: What is best practice - long running ajax - disabling pa
          Sergey Smirnov Master

          You have missed the corresponded RichFaces cookbook article somehow:
          http://www.jboss.org/community/docs/DOC-11852

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

          • 2. Re: What is best practice - long running ajax - disabling pa
            Kerdudou Ronan Apprentice

            you can also directly put the modal div in your layout and call show/hide on ajax request...

            exemple:

            <body>
            <h:panelGroup>
             <div id="attente" class="position_absolute" onclick="showAttenteTexte();"
             style="display:none;width:100%;height:100%;top:75px;left:0;z-index:300000;">
             <%-- top:75 pour ne pas bloquer le menu TODO ajuster avec le template --%>
             <div id="attenteMire" class="position_absolute"
             style="display:block;width:100px;height:20px;top:50%;left:50%;margin-top:-10px;margin-left:-50px;align:center;">
             <center>
             <h:graphicImage value="#{contexte.themeURL}/Attente.gif"/>
             </center>
             </div>
             <div id="attenteTexte" class="position_absolute"
             style="display:none;width:300px;height:20px;top:57%;left:50%;margin-top:-10px;margin-left:-150px;align:center;z-index:300200;">
             <center>
             <h:outputText styleClass="titreMajeur" style="background-color: #ffffff;" value="#{libelles.TEXTE_ATTENTE}"/>
             </center>
             </div>
             </div>
            </h:panelGroup>
            
            <a4j:status onstop="endOfAjaxRequest()" /><%-- si besoin, implementer onstart="beginOfAjaxRequest()" --%>
            
            script :
            //affiche l'image d'attente : 'Mire'
            function showAttente() {
             LOG.debug('- showAttente');
             // Pour tourner sous IE...
             var appli = navigator.appName;
             var objAttente=jQuery('#attente');
             var divAttente=objAttente.get(0);
             if (divAttente!=null){
             if (appli.indexOf('Microsoft')!=-1) {
             //note : on utilise la fonction "find" de jQuery pour optimiser.
             var divAttenteMire = objAttente.find('#attenteMire').get(0);
             var temp = divAttenteMire.innerHTML;
             divAttenteMire.innerHTML = temp;
             //pour bien empecher toute actions, sous ie6, on devrait desactiver les 'select' et les reactiver (ceux qui etaient actifs) a  la fin...
             }
             divAttente.style.display='block';
             }
            }
            //ajoute un texte sous la mire (appele si on clic en presence de la mire)
            function showAttenteTexte() {
             var elem = jQuery('#attenteTexte').get(0);
             if (elem!=null){
             elem.style.display="block";
             }
            }
            
            //cache l'image d'attente
            function hideAttente() {
             LOG.debug('- hideAttente');
             var obj = jQuery('#attente');
             var elem = obj.get(0);
             if (elem!=null){
             elem.style.display='none';
             elem = obj.find('#attenteTexte').get(0);
             if (elem!=null){
             elem.style.display='none';
             }
             }
            }
            
            function endOfAjaxRequest(){
             LOG.debug('-> endOfAjaxRequest');
            
             ...
            
             hideAttente();
             LOG.debug('<- endOfAjaxRequest');
            }
            
            form :
            <h:form id="formPage" onsubmit="return validerForm(this);">
            
            script :
            function validerForm(f) {
             ...
             if (ok) {
             showAttente();
             return true;
             }
             return false;
            }
            


            • 3. Re: What is best practice - long running ajax - disabling pa
              Patrick Madden Newbie

              Thank you all very much. My issue is now solved :)