How to implement update handler for Primefaces progressBar?

Question

I have a regular Ajax PF progressBar:

        <p:progressBar value="#{myTask.progress}" labelTemplate="{value}%" ajax="true" widgetVar="progress">
            <p:ajax event="complete" oncomplete="progress.cancel();"></p:ajax>
        </p:progressBar>

How can I run my JavaScript code whenever progressBar has updated it's value?

Answer 1

Use the RequestContext object to execute javascript from the server side. To use this:

1. Define a method in your backing bean, in which you'll make use of the RequestContext object

    public void doJs() { RequestContext ctx = RequestContext.getCurrentInstance(); context.execute("progress.cancel();"); } 

2. Set this method in the listener attribute of the <p:ajax/>

    <p:progressBar value="#{myTask.progress}" labelTemplate="{value}%" ajax="true" widgetVar="progress"> <p:ajax event="complete" listener="#{theBean.doJs}"/> </p:progressBar> 

EDIT: To perform the execute after every ajax update, the setup is a little different:

1. Add the interval attribute to your progress bar to introduce a better controlled polling mechanism

    <p:progressBar value="#{myTask.progress}" labelTemplate="{value}%" ajax="true" widgetVar="progress" interval="3000"> 

2. Add an <f:event/> to hook into the page lifecycle of the component and perform your server-side update from there. I'm going to recommend the PostValidateEvent event

    <p:progressBar value="#{myTask.progress}" labelTemplate="{value}%" ajax="true" widgetVar="progress" interval="3000"> <f:event type="postValidate" listener="#{theBean.doJs}" /> </p:progressBar>