PrimeFaces 向导 - 如何使用 onstart/oncomplete 进行选项卡更改 ajax 加载答案

【问题标题】：PrimeFaces wizard - how can I use onstart/oncomplete for tab change ajax loadingPrimeFaces 向导 - 如何使用 onstart/oncomplete 进行选项卡更改 ajax 加载
【发布时间】：2016-03-24 19:24:23
【问题描述】：

我正在使用 PrimeFaces 4。我不想使用p:ajaxStatus，因为我只想显示几个组件的加载。所以我有一个p:blockUI 组件，我通常会在 ajax 事件中通过这样做来显示：

onstart="loading.show();" oncomplete="loading.hide();"

但是对于p:wizard 组件，当用户更改选项卡（单击下一步/后退按钮或单击选项卡标题）时，我不知道该怎么做。我在向导中尝试了以下操作：

<p:wizard id="wizard" flowListener="#{myBean.onFlowProcess}" style="display: inline-block;" backLabel="Prev" nextLabel="Next" showNavBar="true" widgetVar="wizardWV"> 
    <p:ajax event="tabChange" onstart="loading.show();" oncomplete="loading.hide();" />
    <p:tab id="tab1" title="My tab 1">
        <p:panel>
            <h:outputLabel value="test" />
        </p:panel>
    </p:tab>
    <p:tab id="tab2" title="My tab 2">
        <p:panel>
            <h:outputLabel value="test2" />
        </p:panel>
    </p:tab>
</p:wizard>

然后我得到了错误：

<p:ajax> Unable to attach <p:ajax> to non-ClientBehaviorHolder parent

有什么办法可以做到吗？

谢谢

【问题讨论】：

你能发布一些代码吗？很可能 p:ajax 不在正确的容器内，即 - 在向导中而不是 tabView。
@VeenarM 请检查我更新的代码。你在tabView中是什么意思？我应该使用 tabView 吗？谢谢！
在 p:wizard 上，他们有这 2 个功能 - onback，onnext 在 p:wizard 行上尝试它们 - 我不相信向导有 ajax 事件 tabChange（在 tabView 中）但是向导是一个来回的流程，你不需要使用 .hide() 我相信整个渲染框都重新完成了 - 但我有一段时间没有测试它了。 P.S 我有点困惑，afaik 向导中的选项卡不可选择，只有后退/下一步按钮？
@VeenarM 我试着只打电话给.show()，但是在加载另一个选项卡后加载并没有隐藏。向导的选项卡是可点击的。谢谢
刚刚遇到了同样的问题。使用 onnext 和 onback 属性来显示您的等待对话框（如 VeenarM 所述）。并在 flowListener 方法中使用 PrimeFaces.executeScript() 隐藏对话框。这绝对是一个 hack，但似乎是目前为向导组件获取自定义 AJAX 指示器的唯一解决方案。

标签： jsf jsf-2 primefaces

【解决方案1】：

这是因为向导不是客户端行为容器。

向导的标准流程是选项卡仅用于在标题中显示。您应该为向导流程使用 Next/Back 触发器。

参考：http://www.primefaces.org/showcase/ui/panel/wizard.xhtml 具有基本功能/流程，但还有更多链接 http://www.primefaces.org/docs/vdl/3.5/primefaces-p/wizard.html

如果您想让您的选项卡可点击，那就另当别论了，您需要设置您的流监听器，让它们都选择与下一个相同的方法/操作 - 但将参数传递给支持 bean并手动确定流量。您可以在 PF 中设置远程调用，并附加一个 onclick 以访问您等待加载的意图。

我会看看用例场景，也许向导是您正在寻找的错误组件？

查看提供的代码，您的选项卡当前不可点击，并且我看不到您的后退/下一步操作按钮。

【讨论】：

感谢您的帮助！至少在 PF 4 上，选项卡是可点击的，并且默认情况下会添加下一步/后退按钮。但无论如何，看起来我想要完成的事情是不可能的......也许我必须更改为p:tabView，因为“加载”对于一个沉重的标签非常重要。
需要加载它并测试行为。您可以将javascript脚本放在页面中，“加载”它会关闭微调器/阻止程序。所以 ajax 重新渲染会导致它运行？