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>时才会产生混淆。