CODEWITHSUNDEEP
jsfprimefacestabview
user2947084
user2947084

Reputation: 37

Keep current tab when updating tabview

I'm using primefaces 4.0 and have a tabview with 4 tabs. When I click a button in one of the tabs I want to update all of the tabs but keep the current tab selected. However, when I update the tabview, the selected tab keeps getting set back to the first tab.

Is there a simple way to keep the current tab when updating the entire tabview?

Upvotes: 6

Views: 7431

Answers (5)

grigouille
grigouille

Reputation: 705

I will complete the answers. In the facelet, use activeIndex and tabChange listener

<p:tabView activeIndex="#{bean.activeIndex}">
    <p:ajax event="tabChange" listener="#{bean.onTabChange}" />
</p:tabView>

In the bean update the activeIndex :

private Integer activeIndex;

public void onTabChange(TabChangeEvent<?> event) {
    Tab tab = event.getTab();
    TabView tabView = (TabView) event.getSource();
    this.activeIndex = tabView.getChildren().indexOf(tab);
}

Upvotes: 0

gmode
gmode

Reputation: 3740

This simple solution works for me. this is my tab list which is like a header, maintained across all pages:

        <h:form id="menuForm">
            <p:tabMenu activeIndex="#{param.i}" >
                <p:menuitem value="Admin" outcome="/administration/index.xhtml?i=0" >
                    <f:param name="i" value="0"/>
                </p:menuitem>


                <p:menuitem value="Marketing" outcome="/marketing/index.xhtml?i=1" >
                    <f:param name="i" value="1"/>
                </p:menuitem>

                ...

            </p:tabMenu>
        </h:form>

And then, if I have a button that directs me to another page, my button looks like this:

<p:button outcome="/edit-user.xhtml?i=2" value="Edit User" />

You can see demo here: http://www.primefaces.org/showcase/ui/menu/tabMenu.xhtml?i=0

Upvotes: 0

user3063731
user3063731

Reputation: 47

You could on tab change store the tab index as a global JavaScript variable.

<script>
    var activeIndex = 0;
    function handleTabChange(event, index) {
        activeIndex = index;
    }
</script>
...
<p:tabView widgetVar="tabView1" onTabChange="handleTabChange(event, index)">
    ...
</p:tabView>

You could then on complete of a command restore the tab index from global JavaScript variable.

<p:commandButton ... oncomplete="tabView1.select(activeIndex)" />

Upvotes: 1

Vsevolod Golovanov
Vsevolod Golovanov

Reputation: 4206

In addition to the other answer there is one more thing: the activeIndex is actually a client-side index. That means that if you have unrendered tabs then you would have to compensate, so the unrendered tabs wouldn't count towards the index number. You can do it like this:

String targetTabClientId = "my_tabview:my_tab";
Tab targetTab = (Tab) FacesContext.getCurrentInstance().getViewRoot().findComponent(targetTabClientId);
TabView tabView = (TabView) targetTab.getParent();

int clientActiveIndex = 0;
for (UIComponent tab : tabView.getChildren()) {
    if (tab.equals(targetTab))
        break;
    if (tab.isRendered())
        ++clientActiveIndex;
}
return clientActiveIndex;

Upvotes: 1

Joffrey Hernandez
Joffrey Hernandez

Reputation: 1846

You could use activeIndex attribut from tabView : 

<p:tabView activeIndex="#{bean.activeIndex}"/>

From Primeface User Guide:

activeIndex is an Integer with default value 0. Index of the active tab.

Upvotes: 6

Related Questions