7 Replies Latest reply on Mar 10, 2009 2:44 PM by David Greenberg

    progressBar on client

    David Greenberg Newbie

      Hi,

      I want to put a very simple client mode progressBar on one of my facelets pages. All it needs to do is display at 100% on command and disappear on command (it doesn't need to poll). It displays fine, but I can't get it to disappear. This is what I have:

      <script>
      // <![CDATA[
      function startMyProgress() {
       #{rich:component('myProgress')}.setValue(100);
      }
      function stopMyProgress() {
       #{rich:component('myProgress')}.setValue(101);
      }
      // ]]>
      </script>
      <rich:progressBar id="myProgress" mode="client" />
      


      I have obviously tried any number of combinations involving the enable, disable, finish, and hideAll functions, and nothing seems to work. I am using JSF 1.2 and RichFaces 3.2.1.GA. The behavior described happens in both Mozilla and IE 7.

      Am I missing something obvious?

      Thanks,
      David


        • 1. Re: progressBar on client
          David Greenberg Newbie

          Apparently I posted too soon, but it still doesn't work as I would expect.

          The following works:

           <a4j:form>
           <rich:progressBar id="myProgress" mode="client" />
           <script>
           // <![CDATA[
           function startMyProgress() {
           #{rich:component('myProgress')}.setValue(100);
           }
           function stopMyProgress() {
           #{rich:component('myProgress')}.setValue(101);
           }
           // ]]>
           </script>
           </a4j:form>
           <a4j:form ajaxSubmit="true">
           <a4j:commandButton value="click me to start" onclick="startMyProgress();" />
           <a4j:commandButton value="click me to stop" onclick="stopMyProgress();" />
           </a4j:form>
          


          The following does not:
           <a4j:form>
           <rich:progressBar id="myProgress" mode="client" />
           <script>
           // <![CDATA[
           function startMyProgress() {
           #{rich:component('myProgress')}.setValue(100);
           }
           function stopMyProgress() {
           #{rich:component('myProgress')}.setValue(101);
           }
           // ]]>
           </script>
          </a4j:form>
          <a4j:form ajaxSubmit="true"
           onsubmit="startMyProgress();"
           oncomplete="stopMyProgress();">
           <a4j:commandButton value="click me" />
          </a4j:form>
          


          It seems that the problem here is the oncomplete code is never run. Does anyone know why this might be?

          • 2. Re: progressBar on client
            Andrei Markavtsov Apprentice

            Move 'oncomplete' attribute from the <a4j:from> component to <a4j:support>:

            <a4j:form ajaxSubmit="true"
             onsubmit="startMyProgress();">
             <a4j:commandButton value="click me" oncomplete="stopMyProgress();"/>
            </a4j:form>


            • 3. Re: progressBar on client
              Andrey Stepanov Newbie

              Hello,

              a lot of time has passed but let me still post the question - why it is needed to place progressBar and js-functions AND commandButton in two different forms?

              • 4. Re: progressBar on client
                Ilya Shaikovsky Master

                the first form not needed at all because PB component used as client side in this sample.

                • 5. Re: progressBar on client
                  David Greenberg Newbie

                  The first form is not needed. My general use case is to have one form for the input parameters and one for the results, which is where the progress bar would be located. Re-rendering the results form on complete also works.

                  What would be really, really neat would be for the following to be possible:

                  <rich:progressBar id="myProgress">
                   <f:facet name="initial">
                   <h:outputText value="initial block" />
                   </f:facet>
                   <f:facet name="complete">
                   <h:outputText value="Success!!!" />
                   </f:facet>
                  </rich:progressBar>
                  <a4j:form>
                   <a4j:commandButton value="Submit" progress="myProgress" />
                  </a4j:form>
                  


                  The idea behind this is that I rarely care to display a percentage for the progress, but I almost always want to display a progress bar when someone searches for information. The visual feedback provided by the bar when a user hits a button is very important to show the user that something is happening.

                  Currently, I wrap some of this in a facelets component, but it can get a little messy with all the JavaScript that gets embedded in the page. I often have 10-20 such progress bars on a page. Any ideas on how to do this cleanly are appreciated.

                  Thank you,
                  David

                  • 6. Re: progressBar on client
                    Nick Belaevski Master

                    Hi David,

                    Why not use a4j:status?

                    • 7. Re: progressBar on client
                      David Greenberg Newbie

                      I had not seen that component before, but it looks like it is exactly what I want. I guess sometimes the answer is staring you right in the face. Thanks for the suggestion!