Primefaces tabview tabChange event fired after displaying tab

Question

I am working on a project using Primefaces 3.5 & JSF2.1 (Mojarra)

I have created a primefaces <p:tabView id="tabsVw" dynamic="false"> with two tabs inside and each tab has a primefaces datatable

 <h:form> 
        <p:tabView  dynamic="false">
        <p:ajax event="tabChange" listener="#{tstTab.onDtlTabChanged}" />

            <p:tab title="tab1">
                <p:dataTable value="#{tstTab.list1}" var="v1">
                    <p:column>
                        <h:outputText value="#{v1}"/>
                    </p:column>
                </p:dataTable>
            </p:tab>

            <p:tab title="tab2">
                <p:dataTable value="#{tstTab.list2}" var="v2">
                    <p:column>
                        <h:outputText value="#{v2}"/>
                    </p:column>
                </p:dataTable>          
            </p:tab>
        </p:tabView>
    </h:form>

and inside the bean (view scoped)

@ManagedBean
@ViewScoped
public class TstTab {

    private List<String> list1;
    private List<String> list2;

    public TstTab(){
        list1 = new ArrayList<String>();
        list2 = new ArrayList<String>();


        list1.add("List 1 - Str 1");
        list1.add("List 1 - Str 2");
        list1.add("List 1 - Str 3");
        list1.add("List 1 - Str 4");
        list1.add("List 1 - Str 5");

        list2.add("List 2 - Str 1");
        list2.add("List 2 - Str 2");
        list2.add("List 2 - Str 3");
        list2.add("List 2 - Str 4");
        list2.add("List 2 - Str 5");            
    }


    public void onDtlTabChanged(TabChangeEvent event) {
        System.out.println("000000000000000000");
    }


    public List<String> getList1() {
        System.out.println("11111111111111");
        return list1;
    }


    public List<String> getList2() {
        System.out.println("222222222222222222");
        return list2;
    }

}

now the problem is when run the application and try to navigate (change) between tabs, but I can see that the onDtlTabChanged is called after calling getters, so that is a big problem.

and if change the tabView from static to dynamic, then the behavior is random, in other words the calling to the change event is happening somewhere in the middle of getters.

Thank you in advance.

Answer 1

Well I think that its a primefaces BUG, I found a workaround which as the following

1. Do not use a global form (form for the tabView itself) instead use a form for each tab (inside it that surround the datatable)

2. You have to add a dummy tab to be the first one that must include a form which some static data or pre-loaded data inside

Thats all,

the problem was that the ajax request is inside the global form and it cause the datatables to get their data first before ajax request, the strange thing with Primefaces that if you do not add the first dummy tab it will always execute the first form inside the tabs and get its data and this will cause a problem

regards ,