Primefaces 仅更新选定的选项卡

Question

我有一种情况，我想在触发“选择”事件时更新页面上的多个组件。 然而，其中两个位置位于 tabView 中，如果它们位于当前选定的选项卡中，我只想更新这些组件。我怀疑我正在寻找的东西是这样的......

<p:ajax event="select" 
        update="@(<don't know what to put here> .ui-tabs-selected)" 
        listener="#{treeSelectionView.onNodeSelect}" />

但我不确定。

我尝试的另一种策略只是使 tabView 动态 =“true”，但是当我从 p:ajax 标记调用更新时，即使未选择选项卡，它也会提取数据。 :(

我是 Primefaces 的新手，并且喜欢我目前所看到的内容。这似乎不应该太难，但我不知何故错过了这个标记。此外，我很难找到对我有帮助的文档或示例。希望我只是在错误的地方寻找。 :)

提前致谢。

Answer 1

简而言之，@(...) 语法转换为 jQuery 选择器，它应该返回 JSF 生成的具有具体 id 属性的 HTML 元素。更长的解释可以在这个问题的答案中找到：How do PrimeFaces Selectors as in update="@(.myClass)" work?

您与.ui-tabs-selected 关系密切，但它只指向选项卡本身（选项卡视图顶部的标签），而不是具有.ui-tabs-panel 类的选项卡面板（所选选项卡的实际内容）。正确的 jQuery 选择器是这个，使用 :visible pseudoselector:

update="@(.ui-tabs-panel:visible)"

但是，我只是在这里尝试过，它在当前 PF5 版本中存在渲染错误。整个<div class="ui-tabs-panel"> 本身被替换为唯一的选项卡内容，而不是仅替换其内容。当我将选项卡的内容包装在另一个 <h:panelGroup> 中时它起作用了，它有一个像这样的通用样式类：

<p:tabView>
    <p:tab title="one">
        <h:panelGroup id="one" styleClass="tab-content">
            ...
        </h:panelGroup>
    </p:tab>
    <p:tab title="two">
        <h:panelGroup id="two" styleClass="tab-content">
            ...
        </h:panelGroup>
    </p:tab>
    <p:tab title="three">
        <h:panelGroup id="three" styleClass="tab-content">
            ...
        </h:panelGroup>
    </p:tab>
</p:tabView>

然后可以如下引用：

update="@(.ui-tabs-panel:visible .tab-content)"

请注意，出于第一段中提到的原因，您确实需要给那些<h:panelGroup>s 一个固定的id。