Primefaces datatable Reset and Reload data

Question

I am not sure how to reset the primefaces datatable and then reload data into it.

Any ideas?

As soon as I click "Teacher" or "House Leadership Team", i send a ajax call and then I would like to completely reset the datatable and then reload data.

Here are the parts relating to the two panels:

#{msgs.typeOfLeaderPunishment}
<f:ajax event="valueChange" listener="#{detentionForm.updateData()}" execute="typeOfLeader" render="typeOfPunishment studentTable">
    <p:selectOneMenu id="typeOfLeader" value="#{detentionForm.typeOfLeaderSelectedID}" style="width:400px" panelStyle="width:150px" effect="fade">
       <f:selectItems value="#{detentionForm.teacherTypes}" var="type" itemLabel="#{type.label}" itemValue="#{type.value}" />
    </p:selectOneMenu>
</f:ajax>

This part relates to choosing "House Leadership Team" or "Teacher" which will then trigger a ajax call updating the datatable.

<p:dataTable id="studentTable" var="student" value="#{detentionForm.students}" paginator="true" rows="10" selection="#{detentionForm.studentSelected}" filterDelay="200" filteredValue="#{detentionForm.filteredStudents}" binding="#{detentionForm.studentTable}">  
      <f:facet name="header">  
           Students:   
      </f:facet>  
                    <p:column id="prefName" headerText="Preferred Name" sortBy="=#{student.prefName}" filterBy="#{student.prefName}" filterMatchMode="contains">  
                        #{student.prefName} 

                    </p:column>  
                    <p:column id="lastName" headerText="Last Name" sortBy="#{student.lastName}" filterBy="#{student.lastName}" filterMatchMode="contains">
                        #{student.lastName}
                    </p:column>
                    <p:column id="house" headerText="House" sortBy="#{student.house}">
                        #{student.house}
                    </p:column>
                    <p:column id="code" headerText="Student Code" sortBy="#{student.studentCode}" >
                        #{student.studentCode}
                    </p:column>
                    <p:column id="gender" headerText="Gender" sortBy="#{student.gender}">
                        #{student.gender}
                    </p:column>
                    <p:column id="formName" headerText="Form" sortBy="#{student.form}">
                        #{student.form}
                    </p:column>
                    <p:column id="yearLevel" headerText="Year Level" sortBy="#{student.yearLevel}">
                        #{student.yearLevel}
                    </p:column>
                </p:dataTable>  

This part is the datatable.

//ajax method called when user clicks on "House Leadership Team" or "Teacher" int the selectOneMenu tag
    public void updateData(){
        this.findStudents();


    }



    //populates the student list with student codes depending on what ledership was chosen (eg. HouseLeader -> import House students only)
    private void findStudents() {
        this.students.removeAll(this.students);
        int houseID =  this.findTeacherHouseID();
        PreparedStatement ps;
        Connection con;
        String sqlStudentsTeacher = "SELECT a.LastName, a.PrefName, a.Code, a.Gender, b.FormName, b.YearLevel, c.HouseName FROM detentioncentredb.tbl_students a, detentioncentredb.tbl_forms b, detentioncentredb.tbl_houses c WHERE a.Form = b.Id AND a.House = c.Id";
        String sqlStudentsHouseLeader = "SELECT a.LastName, a.PrefName, a.Code, a.Gender, b.FormName, b.YearLevel, c.HouseName FROM detentioncentredb.tbl_students a, detentioncentredb.tbl_forms b, detentioncentredb.tbl_houses c WHERE a.Form = b.Id AND a.House = c.Id AND a.House = ?";
        ResultSet rs;
        try {
            con = ds.getConnection();
            if(this.typeOfLeaderSelectedID == 1){
                ps = con.prepareStatement(sqlStudentsTeacher);
            }else{ //typeOfLeaderSelectedID must equal 2. >>>>>>>>>>>Make sure that makeDetention xhtml page has a specific filter and there must be a validator when the user selects a leadership ty.pe
                ps = con.prepareStatement(sqlStudentsHouseLeader);
                ps.setInt(1,houseID);
            }
            rs = ps.executeQuery();
            //Puts a row into a Student object and chucks into the student arraylist
            while(rs.next()){
                Student s = new Student();
                s.setForm(rs.getString("FormName"));
                s.setGender(rs.getString("Gender"));
                s.setHouse(rs.getString("HouseName"));
                s.setLastName(rs.getString("LastName"));
                s.setPrefName(rs.getString("PrefName"));
                s.setStudentCode(rs.getString("Code"));
                s.setYearLevel(rs.getString("YearLevel"));
                this.students.add(s);
            }
            rs.close();
            ps.close();
            con.close();
        } catch (SQLException ex) {
            Logger.getLogger(DetentionFormBean.class.getName()).log(Level.SEVERE, null, ex);
        }

    }


    private int findTeacherHouseID(){
        PreparedStatement ps;
        Connection con;
        String sqlTeacherHouseID = "SELECT House FROM detentioncentredb.tbl_teachers WHERE RegNumber = ?";
        ResultSet rs;
        int id = 0;
        try {
            con = ds.getConnection();
            ps = con.prepareStatement(sqlTeacherHouseID);
            ps.setInt(1, this.details.getUserName());
            rs = ps.executeQuery();
            while(rs.next()){
                id = rs.getInt("House");
            }
            rs.close();
            ps.close();
            con.close();
        } catch (SQLException ex) {
            Logger.getLogger(DetentionFormBean.class.getName()).log(Level.SEVERE, null, ex);
        }

        return id;
    }

This part is apart of the back bean showing the ajax method called and what is done with that method. I don't know what to put into the ajax method to reset the database and then load data back into the datatable.

Solution

The problem is that although you are calling your managed bean method, you are not telling the jsf datatable to "update" its contents.

This should help

<p:selectOneMenu id="typeOfLeader" value="#{detentionForm.typeOfLeaderSelectedID}">
    <f:selectItems value="#{detentionForm.teacherTypes}" var="type" itemLabel="#{type.label}" itemValue="#{type.value}" />
    <p:ajax event="change" update="studentTable" listener="#{detentionForm.updateData()}" />
</p:selectOneMenu>

The important part here is update="studentTable" which tells that after completing the ajax request, update the jsf component with id studentTable.

PS1: This assumest that your selectOneMenu and datatable are in the same form; if not you should replace update="studentTable" with the correct path. PS2: I kindly suggest you reading about DAO layers so that you can remove your findStudents method from your managed bean.

Comments

[Serkan Arıkuşu]

Can you show us the relevant parts of your jsf page and the ajax method in the bean part?

[Apoorv Kansal]

Added the xhtml code and some of the backing bean code.

[Serkan Arıkuşu]

What does this do binding="#{detentionForm.studentTable}" in your datatable definition?

[Apoorv Kansal]

oh, i was trying to access the component from the backing bean and see if i could reset it from java code. I should have removed that because i couldn't do it. Sorry.

[Apoorv Kansal]

But I wrapped that selectOneMenu tag with an f:ajax tag and had a attribute render="StudentTable" . I tried the <p:ajax> tag and it is unresponsive now.

[Apoorv Kansal]

Yeah it is still unresponsive :(

[Serkan Arıkuşu]

May I learn that, when you select an item in the list, is your updateData method called? Can you debug it and see that your sql statements work and produce a valid list?

[Apoorv Kansal]

Yes, it is doing all that. It produces a new list, however the datatable is updating to show this new list UNTIL i enter a character in the input filter area (under Preffered Name column and Last Name column)

[Luiggi Mendoza]

@ApoorvKansal try removing the event value on the <f:ajax> (or <p:ajax>, whichever you're using in your code). Also, look at the PS of this answer.

[Apoorv Kansal]

Yeah I am doing that exactly. I still don't know why it is not updating though.

[Mehul Kaklotar]

try to debug your code. is it doing what you are trying to do with it ?

[Apoorv Kansal]

yes it is. Basically at first it doesn't update, but as soon as i put some filtering input in, it updates to the new list(with filtering)

[Apoorv Kansal]

I removed the event attribute. No change :( What is the PS?

[Apoorv Kansal]

is there a way for me to enter some data into the filtering input text field automatically and then backspace, so the datatable updates?

[Mehul Kaklotar]

i think you have to put <h:form> tag and in the form you have to do this ajax things.