3 Replies Latest reply on Aug 19, 2008 1:57 PM by shadowcreeper

    ajax ui feedback (hourglass, throbbing, input disable)

    Gergely Nagy Newbie

      Hello,

      We'd like to give feedback to the user while richfaces/a4j does its ajaxy things. We only found <a4j:status>, but would like to also change the mouse cursor to hourglass, or even disable the form being posted. Does anyone know solutions for such feedback to the user?

      Thanks,
      Greg

        • 1. Re: ajax ui feedback (hourglass, throbbing, input disable)
          shadowcreeper Apprentice

          Have a4j:status open a rich:modalPanel (this disables the rest of the page while waiting) on start. Before it does that, have it add a class to the body tag that sets the cursor CSS style, and removes it after hiding the modalPanel on stop.

          • 2. Re: ajax ui feedback (hourglass, throbbing, input disable)
            Gergely Nagy Newbie

            Thanks for the tip. We finally came up with this solution:


            function disableForm(formid) {
            form = $(formid)
            form.style.cursor = 'wait';
            formElements = form.elements;
            for(i = 0; i < formElements.length; i++){
            formElements[ i].disabled = true;
            }
            }

            function enableForm(formid) {
            form = $(formid)
            form.style.cursor = 'default';
            formElements = form.elements;
            for(i = 0; i < formElements.length; i++){
            formElements[ i].disabled = false;
            }
            }

            <a4j:status onstart="disableForm('#{formid}')" onstop="enableForm('#{formid}')">
            ...
            </a4j:status>


            Note, this will probably not work as expected if you have disabled form elements, because the javascript code will blindly enable them. This could be avoided with a marker value in the form control's class attribute.

            • 3. Re: ajax ui feedback (hourglass, throbbing, input disable)
              shadowcreeper Apprentice

              That looks good.

              Also, if you want a "processing" notice, then a rich:modalPanel also disables the rest of the page (we use an animated gif of a progress bar with the text "Processing request..." above it).

              Of course, if you still want to be able to click on one of the page's other forms, the modalPanel will not work for you.