Updating PrimeFaces datatable row from a dialog

Question

I have a datatable that has a rowexpandor inside which contains two panels one is regular text and one holds a list of comments. I have a button that allows users to add new comments. Now that dialog is in a separate form see code below. My problem is that once the comment has been added the panel that holds all comments is not being refreshed. Here is a code sample.

 <h:form id="formName">


        <p:dataTable  id="prTable" rowIndexVar="index" sortMode="multiple" styleClass="iris_table" var="value" value="#{bean.listValues}"  
                     paginator="true"  rows="10" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                     rowsPerPageTemplate="5,10,15">
            <p:ajax event="rowToggle" onstart="rowMutalExclusive();"/>


            <p:column style="width:2%">  
                <p:rowToggler />

            </p:column> 



            <p:column id="message"   
                      headerText="Description" 
                      filterMatchMode="contains" filterStyle="display: none;">  
                <h:outputText value="#{value.description}" />  
            </p:column>  


            <p:column id="deadline" headerText="Deadline" filterStyle="display: none;">  

                <h:outputText  value="#{value.endDate}">
                    <f:convertDateTime pattern="dd.MM.yyyy " />
                </h:outputText>
            </p:column>  
            <p:rowExpansion > 

                <div class="iris_peerreview_details">

                    <div class="comments">

                        <p:commandButton value="Comment" process="@this" update=":dialogForm:commentDlg" oncomplete="commentDialog.show()">  
                            <f:setPropertyActionListener target="#{bean.review}" rendered="check" value="#{value.review}"></f:setPropertyActionListener>     
                        </p:commandButton>
                        <div class="clear"></div>
                    </div>
                    <p:panel id="pnlHelp"  style='border:none'>
                        <p:dataList id="check" rowIndexVar="index" value="#{bean.commentsFromCase(value.review)}" var="commentReview"> 
                            <div class="messages">
                                <p> 
                                    <h:outputText value="#{commentReview.date}">
                                        <f:convertDateTime pattern="MM.dd.yyyy 'at' h:mm a"></f:convertDateTime>
                                    </h:outputText>  

                                </p>
                                <p class="message">
                                    <h:outputText styleClass="message"  value="#{commentReview.comment}"/>

                                </p>

                            </div>
                        </p:dataList>
                    </p:panel> 
                </div>


            </p:rowExpansion> 
        </p:dataTable> 
    </h:form>
    <h:form id="dialogForm" >
        <p:dialog id="commentDlg" header="Comment" widgetVar="commentDialog" resizable="false" 
                  modal="true">

            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">

                <h:outputText value="Comment"" />
                <h:inputText value="#{bean.comment}" required="true" requiredMessage="Please enter a comment" style="font-weight:bold"/>                                               
                <p:commandButton id="save" actionListener="#{bean.commentCase()}" update=":formName:prTable:pnlHelp" oncomplete="commentDialog.hide();" 
                                  value="Comment"/>
                <p:commandButton id="cancelButton" onclick="commentDialog.hide()" value="Cancel"/>
            </h:panelGrid>
        </p:dialog>
    </h:form>

You have to excuse me as i had to remove some code and mask some of it but generally this is what it does. Now once the comment button is clicked the dialog appears and the comment is store in the db and everything works well but i cannot get it to update the panel of that row that holds the comment. The problem i am guessing is the following once this page its rendered the panel id is actually

 formName:prTable:0:pnlHelp

and the value changes for each row. Now i understand that my update in the dialog is not able to locate the id but if i enter the index and try to create this specif id on render it throws an exception that it cannot be found.

I have attempted by placing the dialog inside the dataTable and than it works ok with updating but it causes many more problems, so i had to drop that option. Also if i update the full table it ok but the problem is that the rowexpandor closes which is not what its required, plus it not really don't like refreshing the full table as that is not the purpose of this. I am using Primeface 4.0 if this helps. With jsf 2.0.

andremonteiro andremonteiro · Accepted Answer · 2013-10-21T17:29:20

Yes, the value of id changes for every row. Try to update it with a css selector, changing your button to

<p:commandButton id="save" actionListener="#{bean.commentCase()}" update="@([id$=pnlHelp])" oncomplete="commentDialog.hide();" 
                                  value="Comment"/>

The code will update all components ending with "pnlHelp". More info: http://www.w3schools.com/cssref/css_selectors.asp

Updating PrimeFaces datatable row from a dialog

1 Answers