Question

我在p:wizard组件中有PrimeFaces p:dialog。我正在使用自定义按钮进行下一步/上一步：

<p:commandButton value="Weiter" onclick="wiz.next()">

我想更改包含向导的对话框元素，在我的例子中是对话框标题：

<p:dialog id="dialogRespWizard"
        header="#{wizardBean.header}"

我已将代码更改为：

<p:commandButton value="Weiter" onclick="wiz.next()" update="dialogRespWizard">

但是在选择下一步后整个对话框都消失了。

那么，如何在步骤更改时刷新向导'周围'？

Answer 1

关于您的问题：

对话框因为更新整个对话框而消失（意味着整个对话框元素将从HTML页面中删除，并将被从服务器接收的新对话框HTML元素替换），这是有意的。如果你想更新内部对话框，你需要在对话框中创建一些 XXXpanel 并更新XXXpanel（包装HTML对话框元素将是相同的，只是对话框的内容将替换为从服务器收到的新内容：

<p:dialog id="dialogWizard" header="something">
  <p:outputPanel id="outputPanelWizard">
    // a lot of stuff which needs to get updated
  </p:outputPanel>
  <p:commandButton .... update="outputPanelWizard" />
</p:dialog>

...并且您的对话框不会再次隐藏。因此，您需要将标题放入已经完成的 facet 中，向正确的方向迈出一步。

回答您自己回答的问题：

存在“闪烁”，因为您使用 onclick 和更新。用户单击 p：commandButton 后， Onclick 即被执行。但是 update 有时会在循环的后期发生（当浏览器收到服务器的响应时）。因此，向导将使用 wiz.next（）进行切换，然后在对话框标题上进行更新。您可以使用 oncomplete 而不是 onclick ，并且在浏览器收到服务器的响应并且对话框更新后之后会发生切换 - ＆GT;不再“眨眼”。还存在一些其他解决方案，例如

不要在p：commandButton上使用onclick / oncomplete / update，而是使用 RequestContext 处理 action / * actionListener *中的所有内容，如此处所示RequestContext Showcase

this.header = "my new header";
context.execute("wiz.next();"); 
context.update("outputPanelWizard");

优点是恕我直言，您可以评估表格（用户输入）并切换到 wiz.next（）（如果适用或不适用）。当用户输入不满意时，您可以保持在同一页面上，只是不要调用 wiz.next（）。同样适用于标头，您可以根据用户输入更新在支持bean中。

Answer 2

所以，我通过将标题移动到 facet 来处理这个问题。在方面，我可以使用带有任意id的 outputText ，并在向导操作后通过id更新此组件。

<p:dialog id="dialogWizard">
<f:facet name="header">
  <h:outputText id="dialogHeader" value="#{wizard.header}" />
</f:facet>

<p:commandButton value="Weiter" onclick="wiz.next()" update="dialogHeader">

此解决方案的唯一问题是步骤更改后标题的可见“闪烁”。对话框内容首先更改，然后标题更改一段时间后，用户可以看到此不一致。

PrimeFaces向导：更新步骤更改的其他组件

2 个答案: