Primefaces仅更新选定的选项卡

Question

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

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

但我不确定.

我尝试的另一种策略是使tabView dynamic ="true",但是当我从p:ajax标记调用更新时,即使未选中选项卡,它也会拉取数据.:(

我是Primefaces的新手,并且喜欢到目前为止我所见过的东西.这似乎不应该太难,但我不知何故错过了这个标记.此外,我很难找到有助于我的文档或示例.希望我只是在错误的地方寻找.:)

提前致谢.

Answer 1

简而言之,@(...)语法转换为jQuery选择器,该选择器应返回具有具体id属性的JSF生成的HTML元素.更长的解释可以在这个问题的答案中找到:PrimeFaces Selectors如何在update ="@(.myClass)"中工作？

你很接近.ui-tabs-selected,但是它只指向标签本身(tabview顶部的那些标签),而不是标签面板(所选标签的实际内容)有一个类.ui-tabs-panel.正确的jQuery选择器是这个,使用:visible伪选择器:

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>修复这些内容id.