Allow child processing via p:ajax skipChildren=false on TabView and Accordion

[Tirq]

Hi,

When I use the dynamic tabview with tabs including by ui:include and the tab is changed, the content of anothers tabs is losing. This problem/behavior started in version 5+ incluiding the newest version (6.1). In version 4 and 3.5 is working fine.

I opened this issue because another issue with the same problem was closed : #424 .

1) Environment

• PrimeFaces version: 6.1
• Does it work on the newest released PrimeFaces version? Version?NO
• Does it work on the newest sources in GitHub? NO
• Application server + version: weblogic 12.1.3
• Affected browsers: GC,FF

2) Expected behavior

Keep content in the tabs when we changed tabs.
...

3) Actual behavior

Losing content in the not current tabs.
..

4) Steps to reproduce

1 - In the first tab, put some value in the inputtext;
2 - Go to second tab;
3 - Go back to first tab and the value was lost.;

5) Sample XHTML

index.xhtml:

<h:head>
    <title>TabViewSample</title>
</h:head>
<h:body>
    <h:form id="form"> 
        <p:tabView id="tabView" 
                   dynamic="true" 
                   cache="false" 
                   activeIndex="#{controller.activeTab}" >
            <p:ajax immediate="true" 
                    event="tabChange" 
                    listener="#{controller.handleTabChange}"   />
            <ui:include src="_1stTab.xhtml" />
            <ui:include src="_2ndTab.xhtml" />
            <ui:include src="_3rdTab.xhtml" />
        </p:tabView>
    </h:form>
</h:body>

_1stTab.xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui"
            xmlns:ui="http://java.sun.com/jsf/facelets">
    <p:tab id="firstTab" title="FIRST" >
        <h:panelGroup>
            <p:inputText value="#{controller.textFirstTab}" />           
        </h:panelGroup>
    </p:tab>
</ui:composition>

_2ndTab.xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui"
            xmlns:ui="http://java.sun.com/jsf/facelets">
    <p:tab id="secondTab" title="SECOND" >
        <h:panelGroup>
            <p:inputText value="#{controller.textSecondTab}" />           
        </h:panelGroup>
    </p:tab>
</ui:composition>

_3rdTab.xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui"
            xmlns:ui="http://java.sun.com/jsf/facelets" >
    <p:tab id="thirdAba" title="THIRD" >
        <h:panelGroup>
                <p:inputText value="#{controller.textThirdTab}" />           
        </h:panelGroup>
    </p:tab>
</ui:composition>

6) Sample bean

`import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.event.TabChangeEvent;

@ManagedBean
@ViewScoped
public class Controller {

private String textFirstTab;

private String textSecondTab;

private String textThirdTab;

private int activeTab = 0;

public void handleTabChange(TabChangeEvent event) {
    String idTab = event.getTab().getId();
    System.out.println(idTab);
    //do business logic...
}`

[Tirq]

I decided to use a remotecommand called 'updateTabViewOnStartTabChange' to update all contents of the tabs when the tabchange event is fired.
I now, this workaround is not definitly, but it is work:

index.xhtml

<h:head>
    <title>TabViewSample</title>
</h:head>
<h:body>
    <h:form id="form"> 
        <p:tabView id="tabView" 
                   dynamic="true" 
                   cache="false" 
                   activeIndex="#{controller.activeTab}" >
            <p:ajax immediate="true" 
                    onstart="updateTabViewOnStartTabChange();"
                    event="tabChange" 
                    listener="#{controller.handleTabChange}"   />
            <ui:include src="_1stTab.xhtml" />
            <ui:include src="_2ndTab.xhtml" />
            <ui:include src="_3rdTab.xhtml" />
        </p:tabView>
        <p:remoteCommand update="@(.content-tab)"  name="updateTabViewOnStartTabChange"/>
    </h:form>
</h:body>

_1stTab.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui"
            xmlns:ui="http://java.sun.com/jsf/facelets">
    <p:tab id="firstTab" title="FIRST" >
        <h:panelGroup   class="content-tab" >
            <p:inputText value="#{controller.textFirstTab}" />           
        </h:panelGroup>
    </p:tab>
</ui:composition>

[tandraschko]

I checked the the problem and it doesn't look like a bug.
The content is ignored when the taview is doing a self-request like tabChange.
Probably a good way is to implement the skipChildren flag on p:ajax for tabView and accordionPanel.

[Tirq]

@tandraschko can you put an example using skipChildren on ajax and not loose the content when you change tab? For example, in the below i can't send the value (always is null) to the controller, doesn't matter if i use skipChildren true/false.

 <p:tabView id="tabView" 
                      dynamic="true" 
                      cache="false" 
                      activeIndex="#{controller.activeTab}" >
               <p:ajax 
                   immediate="true"
                   skipChildren="true" --doesn't matter true or false
                   event="tabChange" 
                   listener="#{controller.handleTabChange}" />
               <ui:include src="_1stTab.xhtml" />
               <ui:include src="_2ndTab.xhtml" />
               <ui:include src="_3rdTab.xhtml" />
     </p:tabView>

 public void handleTabChange(TabChangeEvent event) {
        System.out.println(textFirstTab); --always print null here if I do not use my 'workaround' with remote command.
        //do business logic...
    }

[tandraschko]

Did you build from trunk? skipChildren=false worked fine for me yesterday

[tandraschko]

I would also try it without immediate ;) Note sure if the value is already there in this case as the listener is executed much earlier.

[Tirq]

Well, unfortunatelly didn't work for me. I tried a lot of things in my tests. I'd like to receive in the controller, the content inside a current tab when a change the tabs and also I'd like change the content in the controller and receive the updated content in the xhtml. This behavior is very useful in the lazing views. If you can put an example when this behavior is contemplated I would be verry happy and I would believe that is not a bug.
I could this behavior just using remote command, but I thought this workaroud very bad, this workaround is in the files attached here:
pog_workaround.zip

Anyway thank you for all ;)

[tandraschko]

I just used your example:

<p:tabView id="tabView" dynamic="true" cache="false" activeIndex="#{controller.activeTab}" > <p:ajax immediate="true" event="tabChange" listener="#{controller.handleTabChange}" /> <ui:include src="_1stTab.xhtml" /> <ui:include src="_2ndTab.xhtml" /> <ui:include src="_3rdTab.xhtml" /> </p:tabView>

If you use the default behavior or skipChildren=true, the content will be lost on tabchange.
When i used skipChildren=false, the content was still there when switching tabs.
I didn't try to to access the variable in the controller till now.