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
– Master Azazel, Commented Jul 19, 2016 at 13:00
@Azazel: the update attribute is for PrimeFaces components. This is plain jsf where it should be the 'render' attribute. See stackoverflow.com/questions/25339056/…. And as a matter of fact, this is already present on the ajax tag inside the button. — Kukeltje
– Kukeltje, Commented Jul 19, 2016 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 <h:form tag — Esteban Rincon
– Esteban Rincon, Commented Jul 19, 2016 at 21:31

Esteban Rincon · Accepted Answer · 2016-07-19 21:41:31Z

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>

Collectives™ on Stack Overflow

Update JSF datatable when add data without refresh page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related