Question

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

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

但我不确定。

我尝试的另一种策略是使tabView dynamic =＆＃34; true＆＃34;，但是当我从p：ajax标签调用更新时，即使没有选中标签，它也会提取数据。：（

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

提前致谢。

Answer 1

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

您与.ui-tabs-selected关系密切，但只指向标签本身（tabview顶部的标签），而不是标签面板（所选标签的实际内容），其类别为{{ 1}}。正确的jQuery选择器就是这个，它使用了:visible pseudoselector：

.ui-tabs-panel

但是，我在这里试了一下，它在当前的PF5版本中有一个渲染错误。整个update="@(.ui-tabs-panel:visible)"本身被替换为唯一的选项卡内容，而不是仅替换其内容。当我将标签的内容包装在另一个<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>。

Primefaces仅更新选定的选项卡

1 个答案: