Primefaces仅更新选定的选项卡 [英] Primefaces update only selected tab

问题描述

我遇到一种情况，当触发选择"事件时，我想更新页面上的多个组件. 但是，其中两个位置位于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的新手，并且喜欢到目前为止所看到的内容.似乎应该不太困难，但是我却以某种方式错过了这个标记.另外，我很难找到对我有帮助的文档或示例.希望我只是在错误的地方寻找. :)

谢谢.

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

您与.ui-tabs-selected关系密切，但是仅指向具有.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.

I have a situation where I want to update multiple components on a page when a "select" event is triggered. However, two of the locations are within a tabView, and I only want to update those components if they are within the currently selected tab. I suspect that what I'm looking for is something like this...

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

But I'm not certain.

Another tactic I tried was just making the tabView dynamic="true", but when I call the update from the p:ajax tag, it pulls the data even when the tabs aren't selected. :(

I'm new with Primefaces, and have liked what I've seen so far. This seems like it shouldn't be too difficult, but I'm missing the mark somehow. Also, I'm having a difficult time finding documentation or examples that will help me. Hopefully, I'm just looking in the wrong places. :)

Thanks in advance.

解决方案

In short, the @(...) syntax translates to a jQuery selector which should return JSF-generated HTML elements having a concrete id attribute. The longer explanation can be found in the answer to this question: How do PrimeFaces Selectors as in update="@(.myClass)" work?

You was close with .ui-tabs-selected, however that only points to the tabs themselves (those labels on top of tabview), not the tab panels (the actual content of the selected tab) which have a class of .ui-tabs-panel. The right jQuery selector is this, making use of :visible pseudoselector:

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

However, I just tried it here, it has a rendering bug in current PF5 version. The whole <div class="ui-tabs-panel"> itself got replaced with the sole tab content instead of that only its contents gets replaced. It worked when I wrapped the tab's content in another <h:panelGroup> having a common style class like this:

<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>

Which could then be referenced as follows:

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

Note that you really need to give those <h:panelGroup>s a fixed id, for the reason mentioned in the first paragraph.

这篇关于Primefaces仅更新选定的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！