Primefaces Jsf refresh 更新p tab id的内容

Question

我有一个 InputTextarea 表单，我可以在其中保存输入的数据，

也是一个数据表，我们可以在其中查看保存的数据，以及操作 - 编辑和删除内容。

目前 commandButton 保存功能正常。

<p:ajax listener="#{gamerCommentsMB.saveNewComment}" process="@this assesmentComments" update="assesmentCommentsTable saveCommentButton assesmentComments" oncomplete="PF('waitSpinner').hide()"/>

请求 - 但是现在单击命令按钮，我想刷新 tab id="assesmentGameFinal 的选项卡内容，其中包括 textContents.xhtml 和 assesmentComments.xhtml 类似于浏览器刷新

所以我尝试了

update="assesmentCommentsTable saveCommentButton assesmentComments assesmentGameFinal"

    render="assesmentGameFinal" 

    process="@this assesmentGameFinal"

没有用，关于如何在单击 p:commandButton 时刷新选项卡 id id="assesmentGameFinal" 的整个选项卡 id 的任何想法？

---

父.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>

页面的表示

Selection Tab   Assesment Tab
                Content From textContents.xhtml

                [   Input Text Area     ]

                 ;Save Button;

更新 - 当我点击 commandButton 按钮时没有更新数据表，但是当我刷新浏览器时，评论已保存在数据表中

Answer 1

您可以添加 p:outputPanel 包装器并对其进行更新：

<p:tabView id="assesmentGameMain">

    <p:tab id="selectGame" title="Selection">
        <ui:include src="/jsf/selectGame.xhtml" />
    </p:tab>

    <p:tab id="assesmentGameFinal" title="Assesment">
        <p:outputPanel id="assesmentGameFinalContainer">
            <ui:include src="/jsf/textContents.xhtml" />
            <ui:include src="/jsf/assesmentComments.xhtml" />
        </outputPanel>
    </p:tab>

</p:tabView>

我不太了解您的 p:commandButton 属性，但在我看来应该是这样的：

<p:commandButton id="saveCommentButton" value="Save Comment"
    onclick="PF('waitSpinner').show()" oncomplete="PF('waitSpinner').hide()"                                   
    widgetVar="saveCommentButtonVar"
    action="#{gamerCommentsMB.saveNewComment}"
    process="@this assesmentGameFinalContainer"
    update="@([id$=saveCommentButton], [id$=assesmentGameFinalContainer])" />