在不刷新页面的情况下添加数据时更新 JSF 数据表答案

【问题标题】：Update JSF datatable when add data without refresh page在不刷新页面的情况下添加数据时更新 JSF 数据表
【发布时间】：2016-07-19 08:17:46
【问题描述】：

我在同一页面中有输入字段和数据表，这样当用户添加新数据时，数据应该添加到数据表中而不刷新页面。

为了实现这一点，我尝试了以下代码

hospials.xhtml：

<h:form>
        <h:outputLabel>Name:</h:outputLabel>
        <h:inputText value="#{hospitalsBean.ename}"/>
        <h:outputLabel>Address:</h:outputLabel>
        <h:inputText value="#{hospitalsBean.hospital.address}"></h:inputText>
        <h:commandButton value="A">
            <f:ajax event="click" render="table" listener="#{hospitalsBean.command()}"></f:ajax>
        </h:commandButton>
    </h:form>
    <h:dataTable id="table" value="#{hospitalsBean.hospitals}" var="hospital">
        <h:column>
            <f:facet name="header">Name</f:facet>
            #{hospital.name.english}
        </h:column>

        <h:column>
            <f:facet name="header">Address</f:facet>
                #{hospital.address}
        </h:column>
    </h:dataTable>

HospitalsBean.java ：

private Hospital hospital = new Hospital();
private ArrayList<Hospital> hospitals = new ArrayList<>();
private Part file; // +getter+setter

public ArrayList<Hospital> getHospitals() {
    return MongoCrud.getHospitals();
}

public void setHospitals(ArrayList<Hospital> hospitals) {
    this.hospitals = hospitals;
}

public Hospital getHospital() {
    return hospital;
}

public void setHospital(Hospital hospital) {
    this.hospital = hospital;
}

public void command() throws IOException {

    MongoService.insertData("Hospital", Finals.gson.toJson(hospital));
}

但是当我向 mongodb 插入数据时，医院变量没有填写名称和地址

【问题讨论】：

在您的命令按钮或 ajax 事件中应该有一个属性更新，您可以在其中引用数据表，如 update="table"
@Azazel：更新属性适用于 PrimeFaces 组件。这是简单的 jsf，它应该是“渲染”属性。见stackoverflow.com/questions/25339056/…。事实上，这已经出现在按钮内的 ajax 标签上。
尝试使用带有 Ajax 标签的 execute="ename_id address_id" 来执行 EditableValueHolders。这需要您将id 属性添加到您的输入中......并且通过执行您将在服务器中执行这些组件或添加execute="@form" 以执行<h:form 标签内的所有组件

标签： jsf datatable

【解决方案1】：

您缺少execute="" 属性，以便您在服务器端通过 ajax 执行组件。

该属性的默认值为@this，它只执行嵌入标签的组件。

所以而不是

<f:ajax event="click" 
        render="table" 
        listener="#{hospitalsBean.command()}" />

试试

<f:ajax event="click" 
        render="table" 
        execute="@form"
        listener="#{hospitalsBean.command()}" />

或提供您的可编辑价值持有者 ID：

    <h:inputText value="#{hospitalsBean.ename}"
                    id="ename"/>
    <h:inputText value="#{hospitalsBean.hospital.address}" 
                    id="address"/>
    <h:commandButton value="A">
            <f:ajax event="click" 
                    render="table" 
                    execute="address ename"
                    listener="#{hospitalsBean.command()}" />
    </h:commandButton>

【讨论】：