Question

I have a page that displays some tabs. Each tab contains an accordion.

Technically, I have a p:tabView component which contains four p:tab. Let's call them p:tabView > p:tab. And inside each p:tab, I have a p:accordionPanel. I will refer to these as p:accordionPanel > p:tab.

My problem is that when the user opens one of the p:tabView > p:tab, then opens one of the p:accordionPanel > p:tab, then clicks on another p:tabView > p:tab, then I don't know how I can close (or "collapse") the currently opened p:accordionPanel > p:tab.

I tried to solve the problem using two onChange event handlers but I hit a methodNotFound exception that I don't understand. My JSF code is:

<p:tabView dynamic="true" cache="false">
    <p:ajax event="tabChange" listener="#{controller.onTabViewTabChange}" update="@this" />
    <p:tab title="tab 1">
        <p:accordionPanel id="accordionPanelForTab1" dynamic="true" activeIndex="-"
                 value="#{controller.viewBeans}"
                 var="viewBean">
            <p:ajax event="tabChange" listener="#{controller.onAccordionPanelTabChange}" update="@this" />
            <p:tab title="#{viewBean.name}">
                <h:outputText value="#{viewBean.name}" />
            </p:tab>
        </p:accordionPanel>
    </p:tab>
    <p:tab title="tab 2">
        <p:accordionPanel id="accordionPanelForTab2" dynamic="true" activeIndex="-"
                 value="#{controller.viewBeans}"
                 var="viewBean">
            ...
        </p:accordionPanel>
    </p:tab>
    ...
</p:tabView>

In my controller, I have the following event handlers :

public void onAccordionPanelTabChange(TabChangeEvent event) {
    logger.info("onAccordionPanelTabChange, tab={}", event.getTab());
}

public void onTabViewTabChange(TabChangeEvent event) {
    logger.info("onTabViewTabChange, tab={}", event.getTab());
}

When I click on the p:accordionPanel > p:tab, I see the expected debug message in the console ("onAccordionPanelTabChange, tab=....").

But when I click on the p:tabView > p:tab, I get the following exception :

 javax.el.MethodNotFoundException: Method not found: org.my.Controller@2691ab6b.onAccordionPanelTabChange(javax.faces.event.AjaxBehaviorEvent)

So Primefaces seems to be able to have only one listener for the tabChange event. The exception refers to onAccordionPanelTabChange and not onTabViewTabChange.

Is there a solution to the original problem of automatically closing the currently opened accordion when the user clicks on the p:tabView p:tab?

NOTE : it seems to be a bug in PrimeFaces : https://code.google.com/p/primefaces/issues/detail?id=3876

Was it helpful?

Solution

It seems that it was a PrimeFaces bug, fixed for PF >= 5 : https://code.google.com/p/primefaces/issues/detail?id=3876

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top