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.

score 11 · Accepted Answer · edited May 23 '17 at 10:31

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.

BalusC, I thought this was working for me, but upon further testing, it is not. There are two ways in which this doesn't appear to be working the way I would expect. First, the data is pulled every time that event fires off, regardless of which of the 4 tabs is selected. The expected behavior would be that ONLY the data required within the currently selected tab would be pulled. Second, even though the event itself is only fired off once, the data is pulled multiple times. Do you have any other suggestions? — JMecham, Oct 27 '14 at 15:32
No. The listener is only called once, but the data that is needed to populate the panelGroup (a dataTable, to be precise) is pulled multiple times. It seems as if the `update=` is causing the data to be retrieved many times, instead of the _one_ time I would expect (since only one tab is selected). Also, the event is fired off by a TreeNode being selected on the page. I don't think that the source of the event should matter, and I think that the event is working fine. If I specify the `update=":myPanelGroup"` the update happens only once. When I use the @() above it happens many times. — JMecham, Oct 28 '14 at 13:08
There are 4 tabs, and a tree on the page. When a node in the tree is selected, it changes the context for the page. That means that an area that is always in view should be updated, and also two tables that are in tabs should also be updated, but ONLY if they are within the currently selected tabs. As it is, the tables are updating even when the appropriate tab is not selected. — JMecham, Oct 29 '14 at 13:14

Primefaces update only selected tab

1 Answers1

Linked