Ajax update=":#{table.clientId}" 似乎不适用于 <p:dataTable>

Question

我在使用 PrimeFaces 5.2 和客户端组件更新机制时遇到一些问题

我创建了一个带有触发服务器端方法的按钮的网页。此方法更新对象列表，最后数据table 将更新为列表的新内容。

<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>

不幸的是，当过程回调结束时，我的数据 table 没有更新.. 抱歉，我找不到问题。

调试阶段没有异常，我在 Firebug 的响应数据中没有看到任何内容。

更新： 我看到当调用 bean 方法时，一些变量已经改变；这种变化不是持久的，每次调用方法时都会错过它们

更新 2： 根据要求，我添加了 bean 代码：

@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!")); 
    }

    //...

}

更新 3：修复了一些命名空间错误。

Answer 1

虽然我不熟悉带数据绑定的数据表，但我认为更新语句不正确，需要在触发命令按钮时更新数据表

update=":growl, :tblSensors"

Answer 2

为什么不直接指定表单 ID，这样更新子元素会更直接？尝试：

<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

我解决了改变实施理念的问题：我将选项卡内容分成 2 个带有相关 bean 的单独 xhtml 文件，第一个用于 "parent" 元素管理，第二个用于其子元素。

所以，第一个 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>

当用户选择“下一步”按钮时，将调用一个新页面并且其 bean 将使用与第一页相关的 bean 以检索所有需要的信息并正确显示其元数据。

这是第二页：

<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>

通过添加传感器按钮，新信息将通过调用的 bean 方法插入到 tableView 中。

@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.

}

//...

}

这样就一切正常了！老实说，当我将所有代码都放在一个 jsf 页面中时，我不知道为什么更新事件不起作用。这是一个 PrimeFaces/JSF 错误吗？也许吧，但我不确定。感谢您的支持，抱歉我的英语不好

Ajax update=":#{table.clientId}" 似乎不适用于 <p:dataTable>

Ajax update=":#{table.clientId}" does not seem to work on <p:dataTable>

datatable

jsf

primefaces

jsf-2