How to update only active tab of p:tabView

jsfjsf-2primefacesrefreshtabs

I need to refresh the p:tabView after doing an action (to display error messages etc.).

The fields to validate are on various tabs. When I update the whole tabView, this is of course buggy behaviour, because in PrimeFaces the invisible tabs should not be updated (because the edit fields are invisible, and when they are refreshed, they are loosing their values, for example p:autoComplete is nulled).

So, I should update the active tab only, but how to target with update attribute of commandButton only the active tab, not the whole p:tabView?

Best Answer

I made a short example:

<h:form id="form">
    <p:tabView id="tabview">
        <p:tab title="tab 1">
            <p:commandButton value="update" update="@parent" />
        </p:tab>
        <p:tab title="tab 2">
            <p:outputPanel id="tab2">
                <p:commandButton value="update" update=":form:tabview:tab2" />
            </p:outputPanel>
        </p:tab>
    </p:tabView>
</h:form>

However, when I update the p:tab by ID or by using @parent (like I do in tab 1) the tab (div) gets deleted, strange... A workaround is to wrap the content of the tab in a container like I did in tab 2.

HA! Found the reason why you cannot update a tab directly: https://code.google.com/p/primefaces/issues/detail?id=3518

Example with the button outside the tabview:

<h:form id="form">
    <p:tabView id="tabview" binding="#{tabView}">
        <p:ajax event="tabChange" update=":form:button" />
        <p:tab title="tab 1">
            <p:outputPanel id="tab0">
                <p:panel>text</p:panel>
            </p:outputPanel>
        </p:tab>
        <p:tab title="tab 2">
            <p:outputPanel id="tab1">
                <p:panel>text</p:panel>
            </p:outputPanel>
        </p:tab>
    </p:tabView>
    <p:commandButton id="button" value="update"
        update=":form:tabview:tab#{tabView.activeIndex}" />
</h:form>
Related Topic