5 Replies Latest reply on Nov 16, 2010 4:53 AM by Nikos Paraskevopoulos

    Best way to disable buttons during ajax request?

    Martin Dames Newbie

      Hi there,


      is there any nice way to (partially) disable buttons during an ajax request. Unfortunately some ajax requests are pretty slow (seam plus jboss 4 plus richfaces is slow anyway...)... and I do not want that the user presses some buttons during waiting time. This could lead to an illegal state of the view and or backend..


      What I want is an easy and flexible way to disable these buttons. I do not want to implement all the fizzy set disable, reRender button(s), set enable, reRender button(s)...


      I could alos popup everytime a modalPanel... but this isn't really user friendly if the user sees all the time a Please wait window.


      The only way to do this in my opinion is to use the a4j:status component with its begin/end facets. There I could call a javascript funtion. I did not tested this yet.


      Well, how are you doing this?


      Thank you!

        • 1. Re: Best way to disable buttons during ajax request?
          Leo van den berg Master

          Hi,


          I am using a small modalpanel which disables the whole screen while doing whatever task. I tried different solutions (rerendering the button/disabling etc.), but i've found that a simple wait works the best.


          attributes of the button:



          oncomplete="#{rich:component('waitPanel')}.hide();" 
          onclick="#{rich:component('waitPanel')}.show();"
          
          




          The modal panel:




          <h:form id="waitForm" >
               <rich:modalPanel id="waitPanel" autosized="true" domElementAttachment="form" >
               <h:graphicImage value="/images/wait30.gif" />
               </rich:modalPanel>
          </h:form>
          


          The gif is a small animated gif.


          As long as you keep your action-methods very short the user won't complain. If it takes longer consider firing an asynchronous task.



          Leo

          • 2. Re: Best way to disable buttons during ajax request?
            Martin Dames Newbie

            Hi Leo,


            hmm... then I have to decide between running very low tasks (display popup) and simple tasks (simple ajax requests). I wouldn't display a popup for each request. That would be annoying.


            Can you tell me what did you mean with asynchronous task exactly please? Is this a Seam feature or did you mean something else like threading. In J EE is threading forbitten as far as I know.


            Are there any other suggestions for disabling action calls during ajax requests?


            Martin.

            • 3. Re: Best way to disable buttons during ajax request?
              Leo van den berg Master

              Hi,


              The most simple way to start an Async task is using the @Aynchronous annotation on an Action method. In this way you can handle the long running task in s separate Thread. You could rerender the disable attribute of you button, but that only works after you finish the first call. You can use the requestDelay attribute in combination with dropping additional requests (both standard Ajax features of Rich/Ajax-submit. Another one is blocking method access as long as the first request is still running. This can be done with synchronisation, or (a bit trickier) with a boolean which you set at entry and reset at leaving the method.


              All have pro's and contra's but my personal favorite is running things Async.


              Hopefully this helps,


              Leo

              • 4. Re: Best way to disable buttons during ajax request?
                Martin Dames Newbie

                I have tried the JavaScript approach and it seems to be the easiest one. Do the following:


                Provide two simple JS function with jQuery:



                <script type="text/javascript">
                     function disableButtons() {
                          jQuery('input[type=input], input').attr('disabled', true);
                     }
                     function enableButtons() {
                          jQuery('input[type=input], input').attr('disabled', false);
                     }
                </script>
                


                see http://api.jquery.com/checkbox-selector/ for more selectors


                Then use a4j:status with onstart and onstop attributes to call the JS functions:


                <a:status id="globalAjaxStatus" onstart="disableButtons()" onstop="enableButtons()">
                     <f:facet name="start">
                          <h:graphicImage value="/img/spinner.gif" />
                     </f:facet>
                     <f:facet name="stop">
                          <rich:spacer width="16"/>
                     </f:facet>                    
                </a:status>
                



                I use it in my templates and now each button on each page will be disabled during ajax requests


                Martin.