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?

enter image description here

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.

Can you show us the relevant parts of your jsf page and the ajax method in the bean part? — Serkan Arıkuşu, Apr 03 '13 at 10:07
What does this do **binding="#{detentionForm.studentTable}"** in your datatable definition? — Serkan Arıkuşu, Apr 03 '13 at 12:03
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, Apr 03 '13 at 12:24

Serkan Arıkuşu · Accepted Answer · 2013-04-03T11:42:08.277

8

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.

edited Apr 03 '13 at 11:42

answered Apr 03 '13 at 11:05

Serkan Arıkuşu

5,549
5
33
50

But I wrapped that selectOneMenu tag with an f:ajax tag and had a attribute `render="StudentTable"` . I tried the tag and it is unresponsive now. – Apoorv Kansal Apr 03 '13 at 11:15
Yeah it is still unresponsive :( – Apoorv Kansal Apr 03 '13 at 11:50
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? – Serkan Arıkuşu Apr 03 '13 at 11:54
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) – Apoorv Kansal Apr 03 '13 at 11:58
1

@ApoorvKansal try removing the `event` value on the `` (or ``, whichever you're using in your code). Also, look at the PS of this answer. – Luiggi Mendoza Apr 03 '13 at 13:52
I removed the event attribute. No change :( What is the PS? – Apoorv Kansal Apr 05 '13 at 00:36

score 0 · Answer 2 · answered Apr 03 '13 at 14:33

0

whenever you are changing the select one menu with ajax, You are calling updateData method. Try to rebuild the list 'students' which you are displaying on updateData method.

answered Apr 03 '13 at 14:33

Mehul Kaklotar

365
1
19

Yeah I am doing that exactly. I still don't know why it is not updating though. – Apoorv Kansal Apr 03 '13 at 20:08
try to debug your code. is it doing what you are trying to do with it ? – Mehul Kaklotar Apr 04 '13 at 07:50
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 Apr 05 '13 at 00:36
is there a way for me to enter some data into the filtering input text field automatically and then backspace, so the datatable updates? – Apoorv Kansal Apr 05 '13 at 00:50
i think you have to put tag and in the form you have to do this ajax things. – Mehul Kaklotar Apr 05 '13 at 08:34

score 0 · Answer 3 · edited Nov 26 '13 at 10:58

I have same issue with primefaces 4 datatable.

I have changed j2ee version from j2ee6 to j2ee7.
I've changed glassfish server from 3.1.2 final with gf 4
I've changed jsf version from 2.2 to 2.2.4 and nothing changed (still not refreshing)

Thanks to Mehul Kaklotar I've rebuild/call getList() after i create/edit/delete database and my datatable refreshed.

Note: add update=":yourform:yourdatatable" on <p:commandbutton>

score 0 · Answer 4 · answered Dec 31 '13 at 19:04

I've had success by invoking the dataTable's AJAX/jQuery filter() function using the PrimeFaces remoteCommand:

<p:selectOneMenu id="typeOfLeader" value="#{detentionForm.typeOfLeaderSelectedID}"
             style="width:400px" panelStyle="width:150px" effect="fade"
             onchange="typeOfLeaderUpdate();">

<f:selectItems value="#{detentionForm.teacherTypes}" var="type" itemLabel="#{type.label}" itemValue="#{type.value}" />
<p:ajax event="change" oncomplete="typeOfLeaderUpdate();"/>

<p:remoteCommand id="typeOfLeaderRemoteCommandId" name="typeOfLeaderUpdate"
                 actionListener="#{detentionForm.updateData()}"
                 update="studentTable"
                 oncomplete="student.filter();"/>

Primefaces datatable Reset and Reload data

4 Answers4