Active tab index is not updated automatically

Question

Active index is not updated automatically. ReaD in a few posts by placing the tabView in the form in which it works. Or by including <p:ajax event="tabChange"/> in tabview, it works. But nothing works

XHTML

Example 1: automatic updates

  <p:tabView id="categoryTabView" var="promoArticle" value="#{promotionDetailBean.artDTOs}" activeIndex="#{promotionDetailBean.activeTabIndex}"> <p:tab id="categoriesTab" title="#{promoArticle.categoryName}"> <p:dataTable id="promotionDetail_dataTable" var="articlePromo" value="#{promoArticle.artVO}" selection="#{promotionDetailBean.selectedArt}" rowIndexVar="rowIndex"> <p:column id="select" selectionMode="multiple" /> <p:column id="barCode"> <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}" styleClass="inputTextStyle" onchange="onSuggestedValueChange('categoryTabView',#{promotionDetailBean.activeTabIndex}, 'promotionDetail_dataTable',#{rowIndex},'originalCostInputTxt')" /> </p:column> </p:dataTable> </p:tab> </p:tabView> 

Example 2: Updating the tabChange Event

  <h:form id="form"> <p:growl id="growlm" showDetail="true" /> <p:tabView id="categoryTabView" var="promoArticle" value="#{promotionDetailBean.artDTOs}" > <p:ajax event="tabChange" listener="#{promotionDetailBean.tabChanged}" update=":growlm" /> <p:tab id="categoriesTab" title="#{promoArticle.categoryName}"> <p:dataTable id="promotionDetail_dataTable" var="articlePromo" value="#{promoArticle.artVO}" selection="#{promotionDetailBean.selectedArt}" rowIndexVar="rowIndex"> <p:column id="select" selectionMode="multiple" /> <p:column id="barCode"> <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}" styleClass="inputTextStyle" onchange="onSuggestedValueChange('categoryTabView',#{promotionDetailBean.activeTabIndex}, 'promotionDetail_dataTable',#{rowIndex},'originalCostInputTxt')" /> </p:column> </p:dataTable> </p:tab> </p:tabView> 

I need to identify a cell on the onChange event. But activeIndex is always 0, an initialized value. The event does not receive the call.

bean

 private Integer activeTabIndex = 0; public Integer getActiveTabIndex() { return activeTabIndex; } public void setActiveTabIndex(Integer activeTabIndex) { this.activeTabIndex = activeTabIndex; } 

bean

 public void tabChanged(TabChangeEvent event){ TabView tv = (TabView) event.getComponent(); this.activeTabIndex = tv.getActiveIndex(); } 

But the event does not become a trigger. Also not updated automatically.

What are the possible problems?

Thanks Shikha

Answer 1

The following worked for me:

XHTML:

 <p:tabView id="categoryTabView" var="promoArticle" value="#{promotionDetailManagedBean.articuloPromocionDTOs}" dynamic="true"> <p:ajax event="tabChange" listener="#{promotionDetailManagedBean.onTabChange}" /> <p:tab> ... </p:tab> </p:tabView> 

Bean:

 public final void onTabChange(final TabChangeEvent event) { TabView tv = (TabView) event.getComponent(); this.activeTabIndex = tv.getActiveIndex(); } 

Answer 2

This works for me when the tab is not contained inside the form, but each tab contains its own:

• Add a listener to the tab change event in the tabView component:

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

• Getting the active index from the base component of TabView does not work. However, if the newly selected tab is updated correctly, so that we can get the index by searching the TabView child components:

  public void onTabChange (TabChangeEvent event) 
     {   
         TabView tabView = (TabView) event.getComponent ();
         activeTab = tabView.getChildren (). indexOf (event.getTab ());
     }

I hope this works for you too.

Answer 3

For the right sides> = 5.0, use the following code:

 public final void onTabChange(TabChangeEvent event) { TabView tv = (TabView) event.getComponent(); this.ActiveIndex = tv.getChildren().indexOf(event.getTab()); } 

Answer 4

This only works if the active index is not bound to a managed bean . But this is useless to me, since I want to maintain support for bean -view synchronization . I am amazed The team did not allow it (I work with version 3.5). However, it works if p:tabView enclosed in h:form instead of one of them for each tab, but this forces you to change the sending context.

Answer 5

 <p:column id="barCode"> <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}" styleClass="inputTextStyle" onchange="onSuggestedValueChange('categoryTabView', #{promotionDetailBean.activeTabIndex}, 'promotionDetail_dataTable',#{rowIndex}, 'originalCostInputTxt')" /> **_____/>_____** </p:column> 

• you have additional / ">
  

• an immediate truth can cause a problem with p: ajax, you should use an immediate truth if you don't have a check or you are trying to cancel the operation.

   public void tabChange(TabChangeEvent event){ TabView tabView = (TabView) event.getComponent(); Tab tab = (Tab) event.getTab(); String tabChangedMessage = tab.getTitle() + " changed. index=" + tabView.getActiveIndex(); System.out.println(tabChangedMessage); FacesContext fc = FacesContext.getCurrentInstance(); fc.addMessage(null, new FacesMessage("Tab changed", tabChangedMessage)); } <p:tabView> <p:ajax event="tabChange" listener="#{tabChangeBean.tabChange}" update=":growlId" /> <p:tab title="tab 1"> tab1 inside </p:tab> <p:tab title="tab 2"> tab1 inside </p:tab> </p:tabView> 

This works, but the active index is 0.

Answer 6

in your xhtml you call listener = "# {promotionDetailBean. onTabChange }", but in your bean the method name is "public void tabChanged ". Therefore, it cannot work.

I tried the example on the premier storefront:

in bean (TabBean):

 private Integer activeTabIndex = 1; // setter/getter public void onTabChange(TabChangeEvent event) { FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab().getTitle()); TabView tabView = (TabView) event.getComponent(); int activeTabIndex = tabView.getActiveIndex(); System.out.println("--------" + activeTabIndex); FacesContext context = FacesContext.getCurrentInstance(); Map<String, String> params = context.getExternalContext().getRequestParameterMap(); String activeIndexValue = params.get(tabView.getClientId(context) + "_activeIndex"); System.out.println("--------" + activeIndexValue); context.addMessage(null, msg); } 

in xhtml (tabviewChangeListener.xhtml):

 <p:tabView id="tabView" dynamic="true" activeIndex="#{tabBean.activeTabIndex}"> <p:ajax event="tabChange" listener="#{tabBean.onTabChange}" update=":form:growl"/> <p:tab title="Godfather Part I" id="Godfather1"> 

The result will be as expected: At the beginning, the second tab is displayed. I click the first tab, and then the third. sysout:

-------- 0

-------- 0

-------- 2

-------- 2

Answer 7

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 8

 public final void onTabChange(final TabChangeEvent event) { TabView tv = (TabView) event.getComponent(); this.activeTabIndex = tv.getIndex(); } 

It worked for me ...