f:ajax渲染不再更新组件

时间:2015-07-11 03:16:34

标签: jsf

我有一个数据表,我为编辑数据加载一个模态。但是当我编辑并渲染数据表时没有任何改变。

我的意思是我有一个数据表和删除和编辑等操作。当我按下编辑时我打开模态然后我编辑这个模态的数据然后按编辑。如您所见,我为数据表进行渲染,但我看不到数据表中的任何更改

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

1 个答案:

答案 0 :(得分:0)

错误在于:

decimal(20,8)

<f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" ... /> 的{​​{1}}和render属性空格已分隔,不以逗号分隔。

execute

通常情况下,这应该抛出一个例外,详见本Q&amp; A How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar",但是由于Mojarra 2.2.5它停止验证这些属性以支持引用特定的<f:ajax>迭代轮次( issue-2958)。 Spec issue 1372开始解决这个讨厌的quickfix并恢复验证。

仅在PrimeFaces <f:ajax render=":branchesForm:branchesListDiv :branchesForm:branchEditArea @this" ... /> 中支持逗号分隔,这很可能是您的困惑来自的地方。它支持空格和逗号分隔。我们强烈建议<ui:repeat>中使用逗号分隔,因为它在长期内只会让您回到<p:ajax>时感到困惑。