Nested tabs do not work properly in dynamic mode

[kullervo16]

When I nest 2 tabviews, it works fine when dynamic="false". When setting dynamic="true", the nested tab dynamically loads the data from the top-level tabs.

When I first open my top-level tab, the content of the inner tab is ok. But when you click on the inner tab, it displays the contents of the top-level tab with the same index (so the second inner level tab contains the content of the second top-level tab). When selecting the first inner tab, it then also loads the first top-level tab (and overwrites the previously correct contents).

Here is small piece of code to demonstrate the problem :

Code: Select all

<h:form>
<p:tabView dynamic="true">
   <p:tab title="Tab1">
        <h1>TAB1</h1>
   </p:tab>
   <p:tab title="Tab2">
        <h1>TAB2</h1>
   </p:tab>
   <p:tab title="Nested tab">
        <p:tabView>
                 <p:tab title="Tab3.1">
                            <h1>TAB3.1</h1>
                 </p:tab>
                 <p:tab title="Tab3.2">
                          <h1>TAB3.2</h1>
                 </p:tab>
                 <p:tab title="Tab3.3">
                         <h1>TAB3.3</h1>
                 </p:tab>
                 <p:tab title="Tab3.4">
                        <h1>TAB3.4</h1>
                 </p:tab>
        </p:tabView>
   </p:tab>
</p:tabView>
</h:form>

Thanks in advance.

Jef.

[Nightbeat]

I think that you have forgotten to publish this part which is thrown in the backend. So I thought it will be easier for the development team to observe, if I published the rest I could see.

Code: Select all

java.lang.IndexOutOfBoundsException: Index: 3, Size: 3
	at java.util.ArrayList.RangeCheck(Unknown Source)
	at java.util.ArrayList.get(Unknown Source)
	at org.primefaces.component.tabview.TabViewRenderer.encodePartially(TabViewRenderer.java:53)
	at org.primefaces.component.tabview.TabView.encodePartially(TabView.java:166)
	at org.primefaces.application.PrimeFacesPhaseListener$2.invokeContextCallback(PrimeFacesPhaseListener.java:262)
	at javax.faces.component.UIComponent.invokeOnComponent(UIComponent.java:1253)
	at javax.faces.component.UIComponentBase.invokeOnComponent(UIComponentBase.java:672)
	at javax.faces.component.UIComponent.invokeOnComponent(UIComponent.java:1262)
	at javax.faces.component.UIComponentBase.invokeOnComponent(UIComponentBase.java:672)
	at javax.faces.component.UIComponent.invokeOnComponent(UIComponent.java:1262)
	at javax.faces.component.UIComponentBase.invokeOnComponent(UIComponentBase.java:672)
	at org.primefaces.application.PrimeFacesPhaseListener.handleAjaxRequest(PrimeFacesPhaseListener.java:124)
	at org.primefaces.application.PrimeFacesPhaseListener.beforePhase(PrimeFacesPhaseListener.java:73)
	at com.sun.faces.lifecycle.Phase.handleBeforePhase(Phase.java:228)
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:99)
	at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:313)

In this case the,

second tab of the top level tabview sends ajax parameter as
j_idt33:j_idt53_activeIndex = 1

second tab of the second level tabview sends ajax parameters as
j_idt33:j_idt53_activeIndex = 1
j_idt33:j_idt62_activeIndex = 1

but as the result (XML content) both of them bring the same content which should result for Upperlevel second tab.

I think the component can only understand the "j_idt33:j_idt53_activeIndex" parameter as the active index.

Here, the same <h:form> (id = j_idt33) represents the ajax request for both tab sets. So "j_idt33 : j_idt62" will definitely not be there.

[Nightbeat]

To use a <p:tabview> within a <p:tab>, with dynamic content loading feature, we need to nest <h:form> within another <h:form>. It's out put html also will be like this.

Code: Select all

<form>
......
<form>
.........
.........
</form>
.....
</form>

Anyway nesting an html form within another html form is something we should not practice isn't it? So you will definitely have to make the parent <p:tabview> component a static tabview.