3 Replies Latest reply on Nov 29, 2011 5:04 PM by Milo van der Zee

    reRender delayed on click of a4j:commandButton

    Its Me Newbie

      Hello,

       

      I have a search application with a number of search criteria on the top of the screen. Once the user enters the search, the screen does a small validation and then hits a hidden a4j:commandButton. The results are displayed in the bottom. The reRender works fine when the number of search results are low. But when the number is high, it takes a bit longer for display, which confuses the users. The code is given below:

       

      ScreenButton:

      <a4j:commandButton

                                                  id="submitButton" value="Submit"

       

       

                                                  onclick="submitSearch();" >

       

       

      Script:

       

       

      function submitSearch(){

          var selAttOperator = document

          .getElementById("mySearch:selDD")[document

          .getElementById("mySearch:selDD").selectedIndex].value;

                         

          var proceed = true;

                         

          if ("ABC" == selAttOperator){

                   

              if (null== fromv ||''== fromv){

                  alert("Please enter Value 1");

                  proceed = false;

                 

              }

              if (null== tov ||''== tov){

                  alert("Please enter Value 2");

                  proceed = false;

                 

              }

            

          }

          if (proceed){

              document.getElementById("mySearch:submitButton").disabled=true;       

              document.getElementById("imageLoading").style.visibility = "visible";

              document.getElementById("mySearch:hdnSubmitButton").click();

             

          }

         

         

      }

      Hidden Button:

       

       

        <a4j:commandButton id="hdnSubmitButton" style="visibility: hidden" action="#{myBean.executeQuery}"

                                                                 styleClass="submit-button"  reRender="val1,val2,val3,val4,val5,resultList,val6,val7,val8"

                                                                 onclick="document.getElementById('imageLoading').style.visibility = 'visible';document.getElementById('mySearch:resultList').style.visibility='hidden';"

                                                                 oncomplete="document.getElementById('mySearch:submitButton').disabled=false;document.getElementById('imageLoading').style.visibility = 'hidden';

                                                                 document.getElementById('mySearch:resultList').style.visibility='visible';"/>

       

         

      Search Results are displayed in a rich:dataTable with an id of resultList.

       

      As it is shown above, we have tried all options of hiding the submit button, displaying a "Loading" image and the hiding the results until the new results come in place, but even then the problem occurs quite frequently. Kindly advice.

       

       

      Regards,

      Nid............

        • 1. Re: reRender delayed on click of a4j:commandButton
          Christian Peter Expert

          You can define a status for your hidden button:

           

                  document.getElementById("mySearch:hdnSubmitButton").click();

           

           

           

          <a4j:status name="mystatus"> <-- look into the api doc for start and ending.

           

          <a4j:commandLink value="clickme" status="mystatus" ../>

           

          you could use an unnamed status as well (for all ajax calling components)

           

          The Idea is, as long as the ajax is working (start, not ended yet), display a mask to prevent user interaction (or show a loading msg). When the call is finished (end), remove the mask.

          • 2. Re: reRender delayed on click of a4j:commandButton
            Its Me Newbie

            Hello Christian,

             

             

            We modified the code to:

             

             

            <a4j:commandButton id="hdnSubmitButton" style="visibility: hidden" action="#{myBean.executeQuery}"

                                                                       styleClass="submit-button"  reRender="val1,val2,val3,val4,val5,resultList,val6,val7,val8"

                                                                       status="commonstatus"/>

             

             

            <a4j:status id="commonstatus">

                                                        <f:facet name="start">

                                                            <h:graphicImage  value="Loading6.gif"/>

                                                        </f:facet>

                                                    </a4j:status>

             

             

            We are still seeing the reRendering taking time in some cases. In the above case, the icon goes away but the fresh results are not displayed until any other ajax event occurs. Replacing the a4j:status to the following did not work either.

             

             

            <a4j:status id="commonstatus" startText="Working....." stopText="" />

             

             

            Kindly advice.

             

             

            Regards,

            Nid.........

            • 3. Re: reRender delayed on click of a4j:commandButton
              Milo van der Zee Newbie

              We block the whole screen by showing a tranparent div by calling a script like this:

              <a4j:status id="status" startText="" stopText="" onstart="showAjaxActive();" onstop="hideAjaxActive();"/>

               

              Javascript:

              /**

              * Start AJAX call.

              */

              function showAjaxActive() {

                  //console.log("showAjaxActive");

               

                  // short delay before showing throbber and visible layer

                  if (showDelayedWaitPID) window.clearTimeout(showDelayedWaitPID);

                  showDelayedWaitPID = window.setTimeout("showAjaxActiveVisible()", 1500);

              }

               

              function showAjaxActiveVisible() {

                  var innerDiv = document.getElementById("pleaseWaitInnerDiv");

                  if(innerDiv == null) return;

                  innerDiv.style.visibility = "visible";

               

                  var div = document.getElementById("pleaseWaitDiv");

                  div.style.backgroundImage = "url(/images/25black.png)";

                  div.style.visibility = "visible";

               

                  centerDiv("pleaseWaitInnerDiv");

              }

               

              /**

              * Stop AJAX call.

              */

              function hideAjaxActive() {

                  var innerDiv = document.getElementById("pleaseWaitInnerDiv");

                  if(innerDiv == null) return;

                  innerDiv.style.visibility = "hidden";

               

                  var div = document.getElementById("pleaseWaitDiv");

                  div.style.visibility = "hidden";

               

                  if (showDelayedWaitPID) window.clearTimeout(showDelayedWaitPID);

              }


              We used to block the screen immidiately but that resulted in blocked screens very often. Every poller or any other request triggers our ajax-active. We now just wait 1.5sec and then show a throbber on a tranparent div. The good thing is that it works for every call.