ajax 如何使用p:ajax依次更新多个组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15488162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use p:ajax to update several components in order
提问by gustavodevmax
I'm trying to render the following JSF page:
我正在尝试呈现以下 JSF 页面：
<h:form id="form" prependId="false">
<h:panelGrid width="100%">
<h:panelGroup id="tableDiv" layout="block">
<h:panelGroup layout="block" style="text-align: center;">
<p:dataTable id="table" var="_item"
value="#{primeBean.findTableModel()}">
...
</p:dataTable>
</h:panelGroup>
</h:panelGroup>
<h:panelGrid columns="2" width="100%">
<h:panelGroup id="barChartDiv" layout="block">
<p:barChart id="barChart"
value="#{primeBean.findCartesianModel()}">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="pieChartDiv,tableDiv" />
</p:barChart>
</h:panelGroup>
<h:panelGroup id="pieChartDiv" layout="block">
<h:panelGroup layout="block">
<p:pieChart id="pieChart">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="tableDiv" />
</p:pieChart>
</h:panelGroup>
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
</h:form>
When I click in any bar on p:barChart, I expect that the components in the update attribute would be rendered in the order that I declare (pieChartDiv,tableDiv), but they are rendered in reverse order (tableDiv,pieChartDiv).
当我单击任何栏时p:barChart，我希望更新属性中的组件将按照我声明的顺序呈现(pieChartDiv,tableDiv)，但它们以相反的顺序呈现(tableDiv,pieChartDiv)。
Is this normal behavior? How can I update a component list in the order the items are declared?
这是正常行为吗？如何按照项目声明的顺序更新组件列表？
回答by BalusC
That's not possible this way. The components are searched and updated in exactly the same order as they appear in the JSF component tree.
这是不可能的。组件的搜索和更新顺序与它们在 JSF 组件树中出现的顺序完全相同。
One way would be to rearrange/swap the both components in the tree hierarchy and reposition them visually with help of CSS. This is however rather clumsy.
一种方法是重新排列/交换树层次结构中的两个组件，并在 CSS 的帮助下重新定位它们。然而，这是相当笨拙的。
Another way would be to update the 2nd component on complete of the update of the 1st component (and thus effectively end up with 2 ajax requests instead of 1). You can achieve that with help of <p:remoteCommand>which is invoked on complete of the <p:ajax>.
另一种方法是在第一个组件更新完成后更新第二个组件（因此实际上最终会收到 2 个 ajax 请求而不是 1 个）。您可以借助<p:remoteCommand>在<p:ajax>.
So, instead of
所以，而不是
<p:ajax ... update="pieChartDiv,tableDiv" />
use
用
<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />
回答by Cesar Miguel
From what I can see...The order in which You have declared your components is following
据我所知......您声明组件的顺序如下
<h:panelGroup id="tableDiv" layout="block"> (1o component)
...
</h:panelGroup>
<h:panelGrid columns="2" width="100%">(2o component)
<h:panelGroup id="barChartDiv" layout="block">
...
</h:panelGroup>
<h:panelGroup id="pieChartDiv" layout="block">
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
"barChartDiv" and "pieChartDiv" are both second components
"barChartDiv" 和 "pieChartDiv" 都是第二个组件
回答by Viktoria Nora Ress
Not so elegant but working solution can be this:
不那么优雅但可行的解决方案可以是这样的：
<p:barChart id="barChart"
value="#{primeBean.findCartesianModel()}">
<p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}"
update="pieChartDiv" /> <!-- This will be updated as first. -->
<p:ajax event="itemSelect"
update="tableDiv" /> <!-- And this will be updated as second. -->
</p:barChart>
