2012-08-01 2 views
0

J'ai créé un projet de test avec JSF2.0 et richfaces. J'essaie de tracer un graphique. Maintenant, j'ai la valeur de la base de données à l'haricot et au datatable. Maintenant, quand je voulais passer cette valeur à javascript varible et trouvé ce answer de The BalusC très userful. Cela fonctionne bien mais la valeur que javascript variable obtient après oncomplete = "jsonDemo ('# {kpilist.json}')". c'est-à-dire que la valeur de # {kpilist.json} n'est pas à jour, c'est la dernière.JSF El expression conservant ancienne valeur (cycle de vie JSF)

J'ai imprimé la valeur de # {kpilist.json}. Si elle est imprimée après la date, la valeur est actuelle. Si elle est imprimée avant datatable c'est la dernière valeur. De toute façon puisque l'attribut complet de a4j: ajax s'exécute après que tout est terminé pourquoi # {kpilist.json} ne montre-t-il pas la dernière valeur? Quel est l'ordre d'exécution des divers attributs d'écoute et incomplets de richfaces et du composant jsf?

Mon 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 = "--"; 
    } 
} 

Mon Vue:

<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); 
    }); 

} 

Répondre

1

L'expression EL dans votre oncomplete est évaluée au moment où le code HTML/JS est généré par JSF (ainsi, sur la requête HTTP initiale). Il n'est pas évalué au moment où le oncomplete est exécuté dans JS comme vous pouvez l'espérer. Ce n'est pas le webbrowser qui évalue les expressions EL, c'est le serveur web. Le oncomplete est d'ailleurs juste exécuté après render. Avec un débogueur de trafic HTTP et un débogueur JS (appuyez sur F12 dans Chrome/IE9/Firebug), vous pouvez facilement le suivre.

Il existe plusieurs possibilités pour résoudre ce:

  1. juste appeler une place $.get() ou $.getJSON() dans jQuery et faire le travail dans un normal servlet, ou mieux, un JAX-RS webservice.

    function jsonDemo() { 
        $.getJSON("servletURL", function(jsonData) { 
         // ... 
        }); 
    } 
    
  2. Remplacer la oncomplete par certains <h:outputScript> que vous rendez/mise à jour par ajax.

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

au Unrelated problème concret, vous avez là par la façon dont une erreur conceptuelle à passer autour des données JSON. Vous le ficelez en passant comme argument comme si jsonDemo('#{kpilist.json}') et ensuite vous parsiez le JSON par la suite en utilisant $.parseJSON(). Cela n'a aucun sens. Supprimer ces guillemets simples autour de l'argument comme si jsonDemo(#{kpilist.json}) et puis vous n'avez plus besoin de cette ligne $.parseJSON(). Les données sont alors déjà au format JSON.

0

Essayez de changer de a4j:ajax à f:ajax

ne sait pas si a4j:ajax fonctionne avec des composants JSF simples

+0

oui ça marche hmmm .. mais je ne connais pas l'ordre d'exécution de son composant comme oncomplete, render etc. – kinkajou

+0

jetez un oeil à cet exemple de BalucS, faites attention à 'onevent =" showProgress "' à l'implémentation 'showProgress', http://stackoverflow.com/a/7044332/617373 – Daniel