General tab: set the active index when changing tabs

Question

I have a tab containing two tabs.

When I switch from tab 1 to tab 2, I invoke code that performs validation and updates some values. Depending on the result of this check, I would like to stay on tab 1 or go to tab 2 and update the contents of the tabs.

My tab:

<h:form id="form"> <p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false"> <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:tabview"/> <p:tab title="Tab 1" id="t1"> <h:panelGrid columns="1" cellpadding="10"> <h:outputText value="#{ctrl.s1}"/> </h:panelGrid> </p:tab> <p:tab title="Tab 2" id="t2"> <h:panelGrid columns="1" cellpadding="10"> <h:outputText value="#{ctrl.s2}"/> </h:panelGrid> </p:tab> </p:tabView> </h:form> 

My test code that just changes the values:

 public void doStuff() { s1 = String.valueOf(Math.random()); s2 = String.valueOf(Math.random()); } 

I thought that changing the active tab index in my method would be enough, for example:

 public void doStuff() { // ... idx = 0; } 

The method is called in the tabChange event, but the tabview components go to the clicked tab, ignoring the new idx value.

I thought that adding the update attribute to p:ajax would display the entire tab, but only the tabs and / or the contents of the tabs would be displayed.

And the strangest thing is, if I change update=":form:tabview" to update=":form" or update="@form" , I get only the contents of the tab in the ajax response → the component disappears from the page!

My bean is being browsed, I am using Primefaces 3.5, JSF 2.1 and Tomcat 7.

Any idea? Thanks.

Answer 1

Try associating a TabView instance with a server-side instance in your bean support.

1. Add an instance of the component component of the TabView to your bean support

 org.primefaces.component.tabview.TabView tabview=null; 

and corresponding getter and setter

 public TabView getTabview() { return tabview; } public void setTabview(TabView tabview) { this.tabview = tabview; } 

2. Enter the server-side instance in TabView

 <p:tabView id="tabview" binding=#{yourBean.tabview} dynamic="true" cache="false"> ... </p:tabView> 

3.Modify your doStuff () method

 public void doStuff() { // ... //idx = 0; tabview.setActiveIndex(0); } 

And he hopefully does the trick.

Answer 2

i easily fix this with

  public void onSPTabChange(TabChangeEvent event) { TabView tabView = (TabView) event.getComponent(); currentData.setSP_Index(tabView.getChildren().indexOf(event.getTab())+1); } 

in currentdata I have a SP_Index property with the number of tabs (first, second ....)

  <p:tabView id="tabView" styleClass="tabView"> <p:ajax event="tabChange" listener="#{dataAccess.onSPTabChange}" /> .... 

and add jquery script

 <script> $("#tabView li:nth-child(#{currentData.SP_Index})").click(); </script> 

Answer 3

Try to save your tab in a panel like this and update this h:panelgrid

 h:panelGrid id="mainPanel"> <p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false"> <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:mainPanel"/> <p:tab title="Tab 1" id="t1"> <h:panelGrid columns="1" cellpadding="10"> <h:outputText value="#{ctrl.s1}"/> </h:panelGrid> </p:tab> <p:tab title="Tab 2" id="t2"> <h:panelGrid columns="1" cellpadding="10"> <h:outputText value="#{ctrl.s2}"/> </h:panelGrid> </p:tab> </p:tabView> </h:panelGrid>