Ajax update =“：＃{table.clientId}”似乎不起作用<p:dataTable>

Question

I have some problems with PrimeFaces 5.2 and client components update mechanism

I created a web page with a button that triggers a server side method. This method update a List of objects and finally a datatable will be updated with new contents of the List.

<h:form> 
        ...
        <p:commandButton value="Add parameters" action="#{adminBean.addParams}"  
                         update=":growl :#{tblSensors.clientId}"  />
</h:form>

<h:form>
    <p:dataTable id="tblSensors"  
            var="sensorElem" value="#{adminBean.sensors}"
            binding="#{tblSensors}"
        >  
            ...
        </p:dataTable>
</h:form>

Unfortunatelly when the procedure callback is over, my data table are not updated .. Sincerlly I'm not able to find the problem.

There are no exception in debug phase and I saw nothing in Response data from Firebug.

UPDATE: I saw that when the bean method is called and some variable has been changed; this changes aren't persistent and they are missed every time the method is called

UPDATE 2: as requested, I add the bean code:

@ManagedBean(name="adminBean")
@SessionScoped
public class AdminBean implements Serializable{
    private List<Sensor> sensors;


    public List<Sensor> getSensors() {
        return sensors;
    }

    public void setSensors(List<Sensor> sensors) {
        this.sensors = sensors;
    }


    //...




 @PostConstruct
    public void init(){
       //...
        //initialize sensor list
        this.sensors = new ArrayList<Sensor>();

        //...
    }



    //method for adding new sensor
    public void addParams(){


        try{


        //add new sensor element to the list 
        this.sensors.add(new Sensor(this.param_name,Double.parseDouble(this.min_val),Double.parseDouble(this.max_val), 
                this.unit, this.selectedChartType, this.selectedFieldType, id_counter++));





        }catch(Exception e){

            System.out.println("Error "+e.getMessage());
            System.out.println("stack "+e.getStackTrace());
        }

        FacesContext.getCurrentInstance().addMessage(null, 
                new FacesMessage(FacesMessage.SEVERITY_INFO,"Successful", "New sensor added!")); 
    }

    //...

}

UPDATE 3 : fix some namespace errors.

Answer 1

althouh我不熟悉带有数据绑定的dataTables，我认为update-statement不正确，触发commandButton时需要更新datatable

update=":growl, :tblSensors"

Answer 2

Why not just specify the form id so that updating child elements will be more straightforward? try:

<h:form> 
        ...
        <p:commandButton value="Add parameters" action="#{amminBean.addParams}"  
                         update=":growl :datatableform:tblSensors"  />
</h:form>

<h:form id="datatableform">
    <p:dataTable id="tblSensors"  
            var="sensorElem" value="#{aminBean.sensors}"
            binding="#{tblSensors}">  
            ...
        </p:dataTable>
</h:form>

Answer 3

I resolve my issue changing the implementation philosophy: I divide the tab contents in 2 separate xhtml files with related beans, the first one for "parent" element management and the second one for its child elements.

so, the first xhtml:

 <h:form> 
     <p:panel id="panel" header="New Station" style="margin-bottom:10px;">
          <h:panelGrid columns="2" cellpadding="5">
          <p:inputText id="stationName" required="true" value="#{adminBean.stationName}"/>
          <p:inputText id="description" required="true" value="#{adminBean.description}" />

          <p:outputLabel value="Station type" for="stationType" />
              <p:selectOneMenu id="stationType" value="#{adminBean.selectedStationType}" >
                  <f:selectItem itemLabel="Select Type" itemValue="-1" noSelectionOption="false" />
                  <f:selectItems value="#{adminBean.stationType}" />
             </p:selectOneMenu>
         </h:panelGrid>
     </p:panel>


    <p:commandButton value="Cancel" action="#{adminBean.cancella}" icon="ui-icon-check"  />

    <p:commandButton value="Next >" id="nextId" binding="#{nextId}"  action="#{adminBean.nextStep}" 
                    icon="ui-icon-check" update=":growl" />
 </h:form>

when user selects the Next Button, a new page will be called and its bean will use the bean related with first page in order to retrieve all needed info and show its metadata correctly.

this is the second page:

<h:form> 
   <p:panel id="panel2" header="Aggiungi sensori" style="margin-bottom:10px;">
      <h:panelGrid columns="2" cellpadding="5">


          <p:inputText id="param_name" required="true" value="#{adminSensorsBean.param_name}"/>


          <p:selectOneMenu id="chartType" value="#{adminSensorsBean.selectedChartType}" >
                   <f:selectItem itemLabel="Select Type" itemValue="-1" noSelectionOption="false" />
                   <f:selectItem itemLabel="Line" itemValue="LINE" noSelectionOption="false" />
                   <f:selectItem itemLabel="Bar" itemValue="BAR" noSelectionOption="false" />
                </p:selectOneMenu>
                //...

                <p:selectOneMenu id="fieldType" binding="#{fieldType}" value="#{adminSensorsBean.selectedFieldType}" >
                    <f:selectItem itemLabel="Select Field" itemValue="-1" noSelectionOption="false" />
                    <f:selectItems value="#{adminSensorsBean.fieldsType}" />
                </p:selectOneMenu>

            </h:panelGrid>

            </p:panel>
            <p:commandButton value="Add Sensor" id="addSensorId" binding="#{addSensorId}" 
                             action="#{adminSensorsBean.addSensor}" 
                             icon="ui-icon-check" update=":growl :#{tblSensors.clientId}" />
        </h:form>

        <h:form>
            <p:dataTable id="tblSensors"  
                var="sensorElem" 
                value="#{adminSensorsBean.sensors}"
                scrollable="true"
                rowKey="#{sensorElem.id}"
                binding="#{tblSensors}"
                scrollHeight="150"
            >  
               //...
               //this table will be filled with data from form above
               //...

            </p:dataTable>
        </h:form>


        //...
        <h:form> 
           <p:commandButton value="Submit" id="submitId" binding="#{submitId}" action="#{adminSensorsBean.saveStation}" 
                    icon="ui-icon-check" update=":growl" />
        </h:form>

through the Add Sensor button new information will be inserted into the tableView by the called bean method.

@ManagedBean(name="adminSensorsBean")
@SessionScoped
public class AdminSensorsBean implements Serializable{

//Managed property from bean of first page
@ManagedProperty(value="#{adminBean}")
    private AdminBean adminBean;

 //...

@PostConstruct
public void init(){
    //Here all second page elements as FieldType list, will be initialized using stored information from managed property.

}

//...

}

In this way everything works fine! Honestly I don't known why update event didn't work when I putted all my code in only one jsf page..is it a PrimeFaces/JSF bug? maybe but I don't sure. Thank you for the support, and sorry for my rough english