f：ajax渲染不再更新組件

Question

我有一個數據表，我加載了編輯數據的模態。但是，當我編輯和渲染數據表沒有任何改變。

我的意思是我有一個數據表和動作像刪除和編輯。當我按下編輯鍵時，我打開模態，然後編輯這個模態的數據，然後按編輯。正如你看到我做的渲染數據表，但我不能看到數據表

<h:form id="branchesForm"> 

        <h:panelGroup layout="block" class="box-header"> 
         <h3 class="box-title">Branches</h3> 
         &nbsp;&nbsp; 
         <h:commandButton value="Add New Branch" id="createBranchBtn" pt:data-loading-text="Loading..." pt:autocomplete="off" class="btn btn-primary sye-action-btn-loading"> 
          <f:param name="pageType" value="create"/> 
         </h:commandButton> 
        </h:panelGroup> 

        <h:panelGroup layout="block" class="box-body table-responsive no-padding branches-datatable"> 
         <div class="SYE-modal"> </div> 
         <h:panelGroup id="branchesListDiv" layout="block" class="container-fluid"> 
          <h:dataTable id="example1" binding="#{index}" class="table table-hover table-bordered table-striped" value="#{branchesMB.list}" var="branch"> 
           <h:column> 
            <f:facet name="header" > 
             <h:outputText value="#"/> 
            </f:facet> 
            <h:outputText value="#{index.rowIndex+1}"/> 
            <f:facet name="footer" > 
             <b><h:outputText value="#"/></b> 
            </f:facet> 
           </h:column> 
           <h:column > 
            <f:facet name="header"> 
             <h:outputText value="Branch Name"/> 
            </f:facet> 
            <h:outputText value="#{branch.branchName}"/> 
            <f:facet name="footer"> 
             <b><h:outputText value="Branch Name"/></b> 
            </f:facet> 
           </h:column> 
           <h:column> 
            <f:facet name="header"> 
             <h:outputText value="Address"/> 
            </f:facet> 
            <h:outputText value="#{branch.branchAddress}"/> 
            <f:facet name="footer"> 
             <b><h:outputText value="Address"/></b> 
            </f:facet> 
           </h:column> 
           <h:column> 
            <f:facet name="header"> 
             <h:outputText value="Abbreviation"/> 
            </f:facet> 
            <h:outputText value="#{branch.branchAbbreviation}"/> 
            <f:facet name="footer"> 
             <b><h:outputText value="Abbreviation"/></b> 
            </f:facet> 
           </h:column> 
           <h:column headerClass="syeActionDatatable"> 
            <f:facet name="header"> 
             <h:outputText value="Action"/> 
            </f:facet> 
            <f:facet name="footer"> 
             <b><h:outputText value="Action"/></b> 
            </f:facet> 
            <div class="btn-group" > 
             <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#"> 
              <i class="glyphicon glyphicon-cog"></i> 
              <span class="caret"></span> 
             </a> 
             <ul class='dropdown-menu pull-right'> 
              <li> 
               <!--pt:data-toggle="modal" pt:data-target=".bs-example-modal-lg"--> 
               <h:commandLink actionListener="#{branchesMB.setEntityEditObject(branch)}" class="editDatatable" > 
                <f:ajax onevent="load" onerror="load" render=":branchesForm:branchEditArea"/> 
                <i class='glyphicon glyphicon-pencil'></i> 
                Edit 
               </h:commandLink> 
              </li> 
              <li> 
               <!--onclick="if (!confirm('Are you sure you want to delete this record?')) return false"--> 
               <h:commandLink action="#{branchesMB.destroy()}" onclick="if (!confirm('Are you sure you want to delete this record?')) 
                  return false;"> 
                <f:ajax render=":branchesForm:branchEditArea"/> 
                <f:setPropertyActionListener target="#{branchesMB.entityDeleteObject}" value="#{branch}"/> 
                <i class='glyphicon glyphicon-trash'></i> 
                Delete 
               </h:commandLink> 
              </li> 
             </ul> 
            </div> 
           </h:column> 
          </h:dataTable> 

          <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
           <div class="modal-dialog modal-lg"> 
            <div class="modal-content"> 
             <div class="modal-header"> 
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
              <h4 class="modal-title" id="myModalLabel">Edit Branch</h4> 
             </div> 
             <div class="modal-body"> 
              <h:panelGroup id="branchEditArea" layout="block" class="box-body"> 
               <ui:include src="/view/includes/messages.xhtml"/> 
               <h:inputHidden value="#{branchesMB.entityEditObject}" converter="BranchesConverter"/> 
               <h:panelGroup id="branchNameDiv" layout="block" class="form-group"> 
                <h:outputLabel value="Branch Name" for="branchName"/> 
                <h:inputText id="branchName" class="form-control" value="#{branchesMB.entityEditObject.branchName}" /> 
               </h:panelGroup> 
               <h:panelGroup id="branchAddressDiv" layout="block" class="form-group"> 
                <h:outputLabel value="Branch Address" for="branchAddress"/> 
                <h:inputText id="branchAddress" class="form-control" value="#{branchesMB.entityEditObject.branchAddress}"/> 
               </h:panelGroup> 
               <h:panelGroup id="branchAbbreviationDiv" layout="block" class="form-group"> 
                <h:outputLabel value="Abbreviation" for="branchAbbreviation"/> 
                <h:inputText id="branchAbbreviation" class="form-control" value="#{branchesMB.entityEditObject.branchAbbreviation}"/> 
               </h:panelGroup> 
              </h:panelGroup> 
             </div> 
             <div class="modal-footer"> 
              <!--pt:data-dismiss="modal"--> 
              <h:commandButton id="close" value="Close" class="btn btn-default" > 
               <f:ajax render="branchesForm:branchesListDiv"/> 
              </h:commandButton> 

              <h:commandButton id="edit" value="Edit" action="#{branchesMB.update()}" class="btn btn-primary sye-action-btn-loading" pt:data-loading-text="Loading..." pt:autocomplete="off"> 
               <f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" execute="branchEditArea branchesForm:branchesListDiv"/> 
              </h:commandButton> 
              <!--            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
                          <button type="button" class="btn btn-primary">Save changes</button>--> 
             </div> 
            </div> 
           </div> 
          </div> 
         </h:panelGroup> 
        </h:panelGroup> 
        <h:panelGroup layout="block" class="box-footer"> 
         Branches 
        </h:panelGroup> 
       </h:form> 

Answer 1

這個錯誤的任何變化是在這裏：

<f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" ... /> 

的<f:ajax>的render和execute屬性空間分離，不用逗號分隔。

<f:ajax render=":branchesForm:branchesListDiv :branchesForm:branchEditArea @this" ... /> 

通常情況下，這應該拋出一個例外，因爲在這個問答&一個How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"詳細說明，但由於鑽嘴魚科2.2.5它停止以便支持引用特定<ui:repeat>迭代循環（issue-2958）驗證這些屬性。 Spec issue 1372已開始解決這個令人討厭的quickfix並帶回驗證。

逗號分隔僅在PrimeFaces <p:ajax>中受支持，並且這很可能是您的困惑來自何處。它支持空格和逗號分隔。強烈建議而不是在<p:ajax>中使用逗號分隔，因爲長期來說，只有當您回到<f:ajax>時纔會產生混淆。