how to get active index with accordionPanel using primefaces in backing bean

Question

when i try to get active index any accordion panel then its always return -1 value. I am using primefaces 7.0 version.

When i try to enable form tag then it is not working with the process of flow step wise.

I have also try other solutions from stackoverflow but nothing tobe work for me. Anyone have idea about this.

1.example.xhtml

<!-- <h:form> -->
                                      
    <ui:fragment
        rendered="#{not empty excursionResultsBean.excursionAvailabilities and not empty excursionResultsBean.excursionAvailabilities[0].excursionCategoryBeans}">
        <p:accordionPanel multiple="false"
            activeIndex="#{panelDisplayBean.index}" role="tablist"  id="indexId" cache="false" >

            <f:ajax event="tabChange"
                listener="#{excursionResultsBean.onTabChange}" update="@form"/>
            
            <ui:insert name="creditCardPanel1">
                <ui:include src="step1.xhtml" />
            </ui:insert>
            <ui:insert name="creditCardPanel2">
                <ui:include src="step2.xhtml" />
            </ui:insert>
            <ui:insert name="creditCardPanel3">
                <ui:include src="step3.xhtml" />
            </ui:insert>
            <ui:insert name="creditCardPanel4">
                <ui:include src="step4.xhtml" />
            </ui:insert>
            
            
        </p:accordionPanel>
    </ui:fragment>
    
    <ui:fragment
        rendered="#{empty excursionResultsBean.excursionAvailabilities or empty excursionResultsBean.excursionAvailabilities[0].excursionCategoryBeans}">
        <div>
            <p>Sorry! We're booked to capacity on your flight</p>
            Please share your travel details with us at <b><a
                href="mailto:guest.ss@ss.com">guest.ss@ss.com</a></b>,
            so that we can work on this specially for you! Or call
            
        </div>

    </ui:fragment>
<!-- </h:form> -->

method in bean

public void onTabChange(TabChangeEvent event) {
        UITabPanel tabView = (UITabPanel) event.getComponent();
        int activeTab = tabView.getChildren().indexOf(event.getTab());
        System.out.println("Active index "+activeTab);
}

Answer 1

A Tab, or any UIComponent, doesn't have an implementation of the equals(Object obj) method. So tabView.getChildren().indexOf(event.getTab()) will never give you the tab index (because it uses the equals method).

What you could do is check the clientId while looping over the children to find the tab index. Not though, that not each child is a Tab per se, so compensate for that.

public void onTabChange(TabChangeEvent event) {
    UIComponent component = event.getComponent();
    String clientId = event.getTab().getClientId();
    int index = -1;
    for (int i = 0; i < component.getChildCount(); i++) {
        UIComponent child = component.getChildren().get(i);
        // Not each child is a tab per se
        if (child instanceof Tab) {
            index++;
            if (clientId.equals(child.getClientId())) {
                // Found it, break out of the for loop
                break;
            }
        }
    }
    System.out.println("index " + index);
}

I've tested the code above with:

<p:accordionPanel>
    <!-- comment -->
    <p:tab title="1"></p:tab>
    <!-- comment -->
    <p:tab title="2"></p:tab>
    <p:tab title="3"></p:tab>
    <p:ajax event="tabChange" listener="#{testView.onTabChange}"/>
</p:accordionPanel>

Answer 2

Seems to be working on Primefaces 10.0 Showcase here: https://www.primefaces.org/showcase/ui/panel/accordionPanel.xhtml

Look at the Change Events example?

This is what I do:

/**
    * Listens for tab change events and updates the active tab value.
    *
    * @param event TabChangeEvent
    */
   public void onTabChange(final TabChangeEvent event) {
      // get the tab view
      final TabView tabView = (TabView) event.getTab().getParent();

      final String tabName = event.getTab().getClientId();

      int i = 0;
      for (final UIComponent item : tabView.getChildren()) {
         if (item.getClientId().equalsIgnoreCase(tabName)) {
            form.setActiveTabIndex(i);
            return;
         } else {
            i++;
         }
      }
      LOG.debug("Selected tab {} could not be located!", event.getTab().getClientId());
   }