JSF Primefaces Ajax update

Question

How can I update my datatable by ajax row select function? What would it be the values that will be put on update parameter ? thanks for your help

Here is my code, there is a datatable and after I click one of the rows in datatable then it shows detail of that row in datatable below but there is a problem with update

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui">
    <h:head></h:head>
    <h:body>
        <f:view>
            <h:form id="form">
                <p:dataTable id="users" var="user" value="#{userOS.osList}"
                    paginator="true" rows="10" rowKey="#{user.kisiid}"
                    selection="#{userOS.selectedOS}" selectionMode="single">
                    <f:facet name="header">  
                                            Kullanıcı detaylarını görmek için view butonuna tıklayınız
                                            </f:facet>
                    <p:ajax event="rowSelect" listener="#{userOS.onRowSelect}"
                        update=":form" oncomplete="userDialog" />

                    <p:column headerText="Student No" sortBy="ogrencino"
                        filterBy="ogrencino" id="ogrencino">
                        <h:outputText value="#{user.ogrencino}" />
                        <f:param name="kid" value="#{userOS.osList.rowIndex}" />
                    </p:column>

                    <p:column headerText="Name" sortBy="ad" filterBy="ad" id="ad">
                        <h:outputText value="#{user.ad}" />
                    </p:column>
                    <p:column headerText="Surname" sortBy="soyad" filterBy="soyad"
                        id="soyad">
                        <h:outputText value="#{user.soyad}" />
                    </p:column>
                    <p:column headerText="Faculty" sortBy="altbirim.ad"
                        filterBy="altbirim.ad" id="altbirim">
                        <h:outputText value="#{user.altbirim.ad}" />
                    </p:column>
                    <p:column headerText="Department" sortBy="bolum.ad"
                        filterBy="bolum.ad" id="bolum">
                        <h:outputText value="#{user.bolum.ad}" />
                    </p:column>
                    <p:column headerText="Status" sortBy="ogrencidurum.ad"
                        filterBy="ogrencidurum.ad" id="ogrencidurum">
                        <h:outputText value="#{user.ogrencidurum.ad}" />
                    </p:column>

                    <f:facet name="footer">
                    </f:facet>
                </p:dataTable>


                <p:tabView id="tabView">
                    <p:tab id="dialog" title="User Detail" widgetVar="userDialog">
                        <h:panelGrid id="panelgrid" columns="2" cellpadding="4">
                            <p:dataTable id="display" var="adres" value="#{userOS.adresList}">
                                <p:column headerText="Adres Tipi">
                                    <h:outputText value="#{adres.addressType}" id="adresturu"/>
                                </p:column>
                                <p:column headerText="Adres">
                                    <h:outputText value="#{adres.address}" id="adres"/>
                                </p:column>
                                <p:column headerText="İl">
                                    <h:outputText value="#{adres.city}" id="sehir"/>
                                </p:column>
                                <p:column headerText="Ülke">
                                    <h:outputText value="#{adres.country}" id="ulke"/>
                                </p:column>
                            </p:dataTable>
                        </h:panelGrid>
                    </p:tab>
                    <p:tab id="tab2" title="Godfather Part II">

                    </p:tab>

                    <p:tab id="tab3" title="Godfather Part III">

                    </p:tab>
                </p:tabView>
            </h:form>
        </f:view>
    </h:body>
    </html>

Kishor Prakash Kishor Prakash · Accepted Answer · 2013-12-13T16:54:44

You are updating the entire @form, in which you are keeping both DataTables.
So why don't you update only the second DataTable when you select a row in First DataTable.
Since your second Datatable is in p:tabView so it will take ID as tabView:display.
So your p:ajax would be:

<p:ajax event="rowSelect" process="@this" listener="#{userOS.onRowSelect}"
             update=":form:tabView:display" oncomplete="userDialog" />

OR

You can move the Second Table in separate Table and update entire Form.
In my experience with p:tabView I don't keep p:tabView inside form.
Rather I'll keep form inside p:tabView.
See this Code:

<h:form id="form">
   <p:dataTable id="users" var="user" value="#{userOS.osList}" ...>

        <p:ajax event="rowSelect" listener="#{userOS.onRowSelect}"
                        update=":tabView:form2" oncomplete="userDialog" />
         .....
         .....
    </p:dataTable>
</h:form>

<p:tabView id="tabView">
   <p:tab id="dialog" title="User Detail" widgetVar="userDialog">
       <h:panelGrid id="panelgrid" columns="2" cellpadding="4">

          <h:form id="form2">
             <p:dataTable id="display" var="adres" value="#{userOS.adresList}">
                 ......
                 ......
              </p:dataTable>
           </h:form>

       </h:panelGrid>
    </p:tab>
</p:tabView>

JSF Primefaces Ajax update

1 Answers