f:ajax渲染不再更新组件 [英] f:ajax render does not update components anymore
问题描述
我有一个数据表,并加载了一个用于编辑数据的模式.但是当我编辑和呈现数据表时,什么都没有改变.
I have a datatable and I load a modal for Edit data. But when I Edit and render the datatable nothing changed.
我的意思是我有一个数据表以及诸如删除和编辑之类的操作.当我按Edit时,我打开模态,然后按此模态编辑数据,然后按Edit.如您所见,我为数据表制作了渲染,但看不到数据表中的任何更改
I mean I have a datatable and actions like delete and edit. When I press on edit I open modal then I edit the data on this modal then press Edit. As you see I make render for datatable but I can't see any changes in the datatable
<h:form id="branchesForm">
<h:panelGroup layout="block" class="box-header">
<h3 class="box-title">Branches</h3>
<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">×</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>
推荐答案
错误在这里:
<f:ajax render=":branchesForm:branchesListDiv,:branchesForm:branchEditArea, @this" ... />
< f:ajax>
的 render
和 execute
属性以空格分隔,而不以逗号分隔.
The render
and execute
attributes of <f:ajax>
are space separated, not comma separated.
<f:ajax render=":branchesForm:branchesListDiv :branchesForm:branchEditArea @this" ... />
通常,这应该引发一个异常,如本问答中所详细说明的引用,但是自Mojarra 2.2.5起,它停止验证那些属性,以支持引用特定的< ui:repeat>
迭代轮(规范问题1372 已开始解决此讨厌的快速修复并恢复了验证.
Normally, this should have thrown an exception as detailed in this Q&A How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar", but since Mojarra 2.2.5 it stopped validating those attributes in order to support referencing a specific <ui:repeat>
iteration round (issue-2958). Spec issue 1372 was started to address this nasty quickfix and to bring back the validation.
仅在PrimeFaces < p:ajax>
中支持逗号分隔,这很可能是造成混淆的地方.它支持空格和逗号分隔.强烈建议不要不要在< p:ajax>
中使用逗号分隔,因为从长远来看,这只会在您回到< f:ajax>时造成混淆.
.
The comma separation is only supported in PrimeFaces <p:ajax>
and this is most likely where your confusion came from. It supports both space and comma separation. It's strongly recommended to not use comma separation in <p:ajax>
as it's in long term only confusing when you come back to <f:ajax>
.
这篇关于f:ajax渲染不再更新组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!