5

How do I switch to a tab (<p:tab>) using a command button?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Bryn
  • 73
  • 1
  • 2
  • 7

4 Answers4

7

There is also a client side api method called selectTab(index);

<p:commandButton type="button" onclick="widgetvar.selectTab(2)" value="Show" />
Cagatay Civici
  • 6,406
  • 1
  • 29
  • 34
  • 4
    An anonymous user edit your post (that was rejected). But I thought the edit was worth adding as a comment: `Actually selectTab is depreciated..use select() instead` – Martin York Nov 27 '11 at 17:22
2

p:tabView has an attribute activeIndex that is the "Index of the active tab" (Primefaces Documentation).

You could set this attribute from the action method of your p:commandButton:

<p:commandButton value="Switch tab" action=#{myBean.switchTab} />

Define an action method switchTab() in your backing bean and let it set a member activeTab.

Then use this member to set your active tab

<p:tabView activeIndex=#{myBean.activeTab}>

If your server supports EL 2.2 you can set the index of the active tab with the action method call:

<p:commandButton value="Switch tab" action=#{myBean.switchTab(2)} />

Then you can use the argument of your action method call to set the active index directly.

Matt Handy
  • 29,855
  • 2
  • 89
  • 112
0

I use Primefaces 5.1 and what I did was bind my tabView in the ManagedBean and set the activeIndex there

In your JSF

<h:form prependId="false" id="form">
    <p:tabView id="tabPanel" widgetVar="tabPanel" binding="#{managedBean.tabView}" dynamic="true">
        <p:tab title="tab" >
        <p:commandButton action="#{managedBean.getBla}"
              icon="ui-icon-search" update=":form:tabPanel" immediate="true" >
              ...

In your ManagedBean

private TabView tabView;
public TabView getTabView() {
    return tabView;
}

public void setTabView(TabView tabView) {
  this.tabView = tabView;

}

And then in the method you call in your commandButton action you just do a tabView.setActiveIndex(1);

Hope it works :)

imTachu
  • 3,759
  • 4
  • 29
  • 56
0

To switch p:tab in the same form using a command button At the Client side only you can use widgetVar to select/view tab as follow:

Note: tabIndex will start from 0 for the first tab.

<p:commandButton type="button" onclick="PF('tabWidgetVar').select(1)" value="Next" />

At the server side you can bind a integer variable with the activeIndex property of the p:tab and then excute method to set index.

Ambrish
  • 195
  • 1
  • 7