Using backing bean value in javascript

Question

   <h:form prependId="false" id="vt_sel_form">
         <p:panelGrid styleClass="center" columns="2">                     
                        <p:commandButton value="GO" oncomplete="alert(#{test.i})"  actionListener="#{test.testfxn()}" update="@this"/>
         </p:panelGrid>
    </h:form>

---

  import java.io.Serializable;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.ViewScoped;

    @ViewScoped
    @ManagedBean(name = "test")

    public class TestClass implements Serializable {

        int i ;

        public int getI() {
            return i;
        }

        public void setI(int i) {
            this.i = i;
        }

        public void testfxn() {        
            setI(i++);
            //i=i+10;
            System.out.println("i" + i);
        }
    }

Here, alert(#{test.i}) is always displaying 0. How do i get backing bean value that changes when I click the commandButton. It works when I click button twice. It used to work fine when I used a4j:commandButton.

Answer 1

That's just because alert(#{test.i}); is evaluated when the commandButton is rendered. You can see the changed value by telling JSF to render the script again:

<h:commandButton value="click me" action="#{testClass.testfxn()}">
    <f:ajax render="out" />
</h:commandButton>
<h:panelGroup id="out">
    <h:outputScript>
         alert(#{testClass.i});
    </h:outputScript>
</h:panelGroup>

Answer 2

Unlike Richfaces where you can directly call javascript function, primefaces you need to have javascript function as:

function_name(xhr, status, args)

Using listed CommandButton as Example:

 <p:commandButton value="GO" oncomplete="alert(#{test.i})"  actionListener="#{test.testfxn()}" update="@this"/>

In function test.testfxn() we have:

public void testfxn(){    
RequestContext reqCtx = RequestContext.getCurrentInstance();
        i = i++;
        reqCtx.addCallbackParam("i", i);
}

Here,In function call to backing bean from actionlistener the variables are added to RequestContext.

Now In javascript function:

function draw(xhr, status, args) {
    console.log("We are into draw function");
    jsonString = JSON.parse(args.i); //json variable is taken out from args variable.
    console.log("The value of i "+ i);
}