Update JSF datatable when add data without refresh page

Question

I have input fields and datatable in the same page, in such a way that when user adds a new data, data should be added to the datatable without refreshing the page.

To achieve this I tried the following code

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

but when i insert data to mongodb the hospital variable have no fill name and address

in your commandbutton or in the ajax event there should be a property update where you can refer to the datatable like update="table" — Master Azazel, Jul 19 '16 at 13:00
@Azazel: the update attribute is for PrimeFaces components. This is plain jsf where it should be the 'render' attribute. See http://stackoverflow.com/questions/25339056/understanding-process-and-update-attributes-of-primefaces. And as a matter of fact, this is already present on the ajax tag inside the button. — Kukeltje, Jul 19 '16 at 14:59
try using `execute="ename_id address_id"` with the Ajax tag to execute the EditableValueHolders. This requires you to add `id` attributes to your inputs ... and with the execute you will execute these components in the server OR add `execute="@form"` to execute all components inside the ` — Esteban Rincon, Jul 19 '16 at 21:31

score 1 · Answer 1 · answered Jul 19 '16 at 21:41

You're missing the execute="" attribute for you to execute the components via ajax on the server side.

The default value for the attribute is @this which in turn only execute the component in which the tag is embedded in.

so instead of

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

try

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

or give your Editable Value Holders IDs:

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

Update JSF datatable when add data without refresh page

1 Answers1