Primefaces update only selected tab

Question

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.

Answer 1

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.