I have a InputTextarea form where I can save the entered data ,
Also a datatable where we can see the saved data, and Actions - Edit and Delete the content.
Currently the commandButton save functionality works fine.
<p:ajax listener="#{gamerCommentsMB.saveNewComment}" process="@this assesmentComments" update="assesmentCommentsTable saveCommentButton assesmentComments" oncomplete="PF('waitSpinner').hide()"/>
Request - But now on click the commandButton I would like to refresh the tab contents of tab id="assesmentGameFinal which includes textContents.xhtml and assesmentComments.xhtml something like a browser refresh
So I tried with
update="assesmentCommentsTable saveCommentButton assesmentComments assesmentGameFinal"
render="assesmentGameFinal"
process="@this assesmentGameFinal"
Did not work, any ideas on how to refresh the whole tab id of tab id id="assesmentGameFinal" upon clicking the p:commandButton?
Parent.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
template="/templates/template.xhtml">
<ui:define name="content">
<h:form id="assesmentGameApplication" enctype="multipart/form-data" >
<h:panelGroup id="id2">
<p:tabView id="assesmentGameMain">
<p:tab id="selectGame"
title="Selection">
<ui:include src="/jsf/selectGame.xhtml" />
</p:tab>
<p:tab id="assesmentGameFinal"
title="Assesment">
<ui:include src="/jsf/textContents.xhtml" />
<ui:include src="/jsf/assesmentComments.xhtml" />
</p:tab>
</p:tabView>
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
assesmentComments.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:fieldset toggleable="true" toggleSpeed="500" legend="Comments">
<div id="assesmentComments" class="ui-fluid">
<div class="ui-g">
<div class="ui-g-12"><p:messages for="assesmentCommentsMessageId" showDetail="true" closable="false"><p:autoUpdate/></p:messages></div>
<div class="ui-g-1"></div>
<div class="ui-g-1"><p:outputLabel value="New Comments" rendered="true" /></div>
<div class="ui-g-8">
<p:row>
<p:inputTextarea rows="5" cols="200" counter="assesmentCommentsText" id="assesmentComments"
value="#{gamerCommentsMB.gameCommentsEntity.commentText}" maxlength="1000"
counterTemplate="{0} characters remaining." autoResize="false" validatorMessage="Too long, please limit to 10000 characters"
rendered="true" >
<f:validateLength maximum="10000" minimum="0" />
</p:inputTextarea>
<h:outputText id="assesmentCommentsText" />
</p:row>
</div>
<div class="ui-g-2"></div>
<div class="ui-g-2"></div>
<div class="ui-g-1">
<p:commandButton id="saveCommentButton" value="Save Comment" type="button"
onclick="PF('waitSpinner').show()" oncomplete="PF('waitSpinner').hide()"
widgetVar="saveCommentButtonVar" rendered="true" >
<p:ajax listener="#{gamerCommentsMB.saveNewComment}" process="@this assesmentComments" update="assesmentCommentsTable saveCommentButton assesmentComments" oncomplete="PF('waitSpinner').hide()"/>
</p:commandButton>
</div>
<div class="ui-g-9"></div>
</div>
<ui:include src="assesmentCommentsDetail.xhtml" />
</div>
</p:fieldset>
</ui:composition>
assesmentCommentsDetail.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<div id="assesmentCommentsDetailsScreen" class="ui-fluid">
<p:spacer width="10" height="10" />
<h:panelGrid width="90%">
<p:dataTable id="assesmentCommentsTable"
value="#{gamerCommentsMB.gameCommentsList}"
var="assesmentCommentsRow" rows="10" widgetVar="assesmentCommentsTableVar"
selectionMode="single"
selection="#{gamerCommentsMB.selectGameComments}"
rowKey="#{assesmentCommentsRow.commentId}"
emptyMessage="No Comments found."
rowIndexVar="commentIterator">
<p:column style="text-align: center;"
headerText="Comment Text" >
<h:outputText value="#{assesmentCommentsRow.commentText}" >
</h:outputText>
<f:attribute name="rowId" value="#{commentIterator}" />
</p:column>
<p:column style="text-align: center; width:5%"
headerText="Actions" >
<p:commandButton id="fileEditCommentButton" icon="ui-icon-pencil" type="button" title="Click to Edit the comment"
onclick="PF('assesmentCommentsTableVar').unselectAllRows();"
onkeypress="PF('assesmentCommentsTableVar').unselectAllRows();"
update="assesmentCommentsDetailsScreen">
<p:ajax listener="#{gamerCommentsMB.editSelectedComment}" update=":assesmentGameApplication:assesmentGameMain:assesmentComments"/>
<f:attribute name="rowId" value="#{commentIterator}" />
</p:commandButton>
<p:commandButton id="fileCommentsDeleteButton" icon="ui-icon-trash" type="button" title="Click to Delete the comment"
onclick="PF('assesmentCommentsTableVar').unselectAllRows();"
onkeypress="PF('assesmentCommentsTableVar').unselectAllRows();"
update="assesmentCommentsDetailsScreen">
<p:ajax listener="#{gamerCommentsMB.deleteSelectedCommentConfirmation}" />
<f:attribute name="rowId" value="#{commentIterator}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:panelGrid>
</div>
</ui:composition>
Representation of the page
Selection Tab Assesment Tab
Content From textContents.xhtml
[ Input Text Area ]
;Save Button;
Update - Did not update the datatable as I hit the commandButton button, But when I refreshed my browser the comment was saved in the datatable
