progressBar on client

[dgreenbean]

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

[dgreenbean]

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?

[andrei_exadel]

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>

[andrew_st]

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?

[ilya_shaikovsky]

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

[dgreenbean]

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

[nbelaevski]

Hi David,

Why not use a4j:status?

[dgreenbean]

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!