JSF El expression retaining old value (JSF life cycle)

Question

I have create a test project with JSF2.0 and richfaces. I am trying to plot chart. Now, I got value from database to bean and to datatable. Now when I wanted to pass this value to javascript varible and found this answer from The BalusC very userful. It works fine but the value that javascript variable gets after oncomplete="jsonDemo('#{kpilist.json}')". i.e. the value of #{kpilist.json} is not up-to-date it's last one.

I have printed the value of #{kpilist.json}. If it's printed afer datatabe the value is current. If it's printed before datatable it's last value. Any way since oncomplete attribute of a4j:ajax executes after eveything is completed why doesn't #{kpilist.json} show latest value? What is the order of execution of various listener and oncomplete attributes of richfaces and jsf component?

My Managed Bean:

@ManagedBean(name = "kpilist")
@ViewScoped
public class KPIListController implements Serializable {

    private static final long serialVersionUID = 1L;
    boolean state = true;
    String selectedKPIType;
    String selectKPITime = "D";
    boolean renderDatatable;
    String json;



    public String getJson() {
        return json;       
    }


    public boolean isRenderDatatable() {
        return renderDatatable;
    }

    public void setRenderDatatable(boolean renderDatatable) {
        this.renderDatatable = renderDatatable;
    }

    public boolean isState() {
        return state;
    }

    public List<String> showViewList() {
        Logger.getLogger(KPIListController.class.getName()).warning("Show view List:");
        KPIDAO kpiDAO = new KPIDAO();
        try {
            Logger.getLogger(KPIListController.class.getName()).info("Into show view List ---select One");
            return kpiDAO.showViewList(selectKPITime);
        } catch (SQLException ex) {
            ex.printStackTrace();
            Logger.getLogger(KPIListController.class.getName()).log(Level.SEVERE, null, ex);
            return null;
        }
    }

    public void setState(boolean state) {
        this.state = state;
    }

    public String getSelectedKPIType() {
        return selectedKPIType;
    }

    public void setSelectedKPIType(String selectedKPIType) {
        this.selectedKPIType = selectedKPIType;
    }

    public String getSelectKPITime() {
        return selectKPITime;
    }

    public void setSelectKPITime(String selectKPITime) {
        this.selectKPITime = selectKPITime;
    }

    public List<KPI> getKPI() {
        Logger.getLogger(KPIListController.class.getName()).warning("Get KPI Values:");
        KPIDAO kpiDAO = new KPIDAO();        
         List<KPI> kpiList = new ArrayList<KPI>();

        try {
            kpiList = kpiDAO.getKPI(selectedKPIType);  
            Logger.getLogger(KPIListController.class.getName()).warning("KPI List:"+kpiList.size());            

        } catch (SQLException ex) {
            ex.printStackTrace();
            return null;
        }
         Gson gson = new Gson();
        json= gson.toJson(kpiList);
        return kpiList;
    }

    public void resetFormValues() {       
        Logger.getLogger(KPIListController.class.getName()).warning("Reset form:");
        selectedKPIType = "--";
    }
}

My View:

<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:rich="http://richfaces.org/rich" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition template="/contentTemplate.xhtml">
            <ui:define name="windowTitle">KPI Index</ui:define>
            <ui:define name="content" >

                <h:outputScript name="js/graphics/jquery.js"/>   
                <h:outputStylesheet name="/css/jquery-ui-1.8.22.custom.css"/>
                <h:outputScript name="js/graphics/jquery-ui-1.8.22.custom.min.js"/>
                <h:outputScript name="js/OpenLayers/OpenLayers.js"/>

                <h:outputScript name="js/graphics/raphael-min.js"/>
                <h:outputScript name="js/graphics/canvg.js"/>
                <h:outputScript name="js/graphics/paths.js"/> 
                <h:outputScript name="js/graphics/draw.js"/> 

                <h:form id="ins_sel_form">
                    <h:outputText value="KPI TIME FRAME"/>
                    <h:selectOneRadio value="#{kpilist.selectKPITime}"  >
                        <f:selectItem itemLabel="DAILY" itemValue="D"   />
                        <f:selectItem itemLabel="WEEKLY" itemValue="W"  />
                        <f:selectItem itemLabel="LAST WEEK" itemValue="LW"  />    
                        <a4j:ajax event="change" render="ins_sel_form:selectOnemenu dataPnl"  listener="#{kpilist.resetFormValues()}" /> 
                    </h:selectOneRadio>

                    <h:outputText value="Major KPI Type"/>
                    <h:selectOneMenu id="selectOnemenu" value="#{kpilist.selectedKPIType}"  >
                        <f:selectItem itemValue="--" itemLabel="--"></f:selectItem>
                        <f:selectItems itemValue="#{item.toString()}" var="item" itemLabel="#{item.toString()}" value="#{kpilist.showViewList()}"/>
                        <a4j:ajax event="change" render="dataPnl"  oncomplete="jsonDemo('#{kpilist.json}')" /> 
                    </h:selectOneMenu>

                    <h:outputText value="Show / Hide Map"/>

                </h:form>
                <rich:panel  id ="dataPnl">

                        <rich:dataTable id="kpiValueTable" value="#{kpilist.KPI}" var="kpi" style="width:100%" rows="20" rendered="#{kpilist.selectedKPIType!=null and kpilist.selectedKPIType !='--' }" >                            

                            <rich:column>
                                <f:facet name="header" >
                                    <h:outputText value ="Value"></h:outputText>
                                </f:facet>
                                <h:outputText value="#{kpi.KPIValue}"></h:outputText>
                            </rich:column>

                        </rich:dataTable>
                    JSON String :  <h:outputText  id="json" value ="#{kpilist.json}"/>   
                        <center><rich:dataScroller for="kpiValueTable" rendered="#{kpilist.selectedKPIType!=null and kpilist.selectedKPIType!='--'}"/></center>
                    </rich:panel>

                <rich:panel id="map" style="display: none;">
                </rich:panel>


            </ui:define>
        </ui:composition>
    </h:body>
</html>

Javascript:

function jsonDemo(jsonString){

    console.log("Chart data already retrieved: " + jsonString);
    var data = $.parseJSON(jsonString);    
    $.each(data,function(i,val){
         console.log("The value of i: "+i+" The val: "+val.NCELLCLUSTER);
    });

}

score 1 · Accepted Answer · edited May 23 '17 at 12:34

The EL expression in your oncomplete is evaluated at the moment the HTML/JS code is generated by JSF (thus, on the initial HTTP request). It's not evaluated at the moment the oncomplete is executed in JS as you seem to expect. It's not the webbrowser who evaluates EL expressions, it's the webserver. The oncomplete is by the way just executed after render. With a HTTP traffic debugger and a JS debugger (press F12 in Chrome/IE9/Firebug) you can easily track it.

There are several possibilities to solve this:

Just invoke a $.get() or $.getJSON() in jQuery and do the job in a normal servlet instead, or better, a JAX-RS webservice.
```
function jsonDemo() {
    $.getJSON("servletURL", function(jsonData) {
        // ...
    });
}
```

Replace the oncomplete by some <h:outputScript> which you render/update by ajax.

<a4j:ajax ... render="json" />
...
<h:panelGroup id="json">
    <h:outputScript rendered="#{not empty bean.json}">jsonDemo(#{bean.json});</h:outputScript>
</h:panelGroup>

Unrelated to the concrete problem, you've there by the way a conceptual mistake as to passing around JSON data. You're stringifying it while passing as argument like so jsonDemo('#{kpilist.json}') and then you're parsing the JSON afterwards using $.parseJSON(). This makes no sense. Remove those singlequotes around the argument like so jsonDemo(#{kpilist.json}) and then you don't need that $.parseJSON() line anymore. The data is then already in JSON format.

score 0 · Answer 2 · answered Aug 01 '12 at 14:24

0

Try changing from a4j:ajax to f:ajax

not sure if a4j:ajax works with plain JSF components

answered Aug 01 '12 at 14:24

Daniel

36,833
10
119
200

yes it works hmmm .. but don't know the order of execution of it's component like oncomplete, render etc.. – kinkajou Aug 01 '12 at 14:25
take a look at this example of BalucS , pay attention to `onevent="showProgress"` to the `showProgress` implementation , http://stackoverflow.com/a/7044332/617373 – Daniel Aug 01 '12 at 14:31

JSF El expression retaining old value (JSF life cycle)

2 Answers2