显示选项卡后触发 Primefaces tabview tabChange 事件 [英] Primefaces tabview tabChange event fired after displaying tab

问题描述

我正在使用 Primefaces 3.5 & 进行一个项目JSF2.1 (Mojarra)

我创建了一个primefaces <p:tabView id="tabsVw" dynamic="false"> 里面有两个选项卡，每个选项卡都有一个primefaces 数据表

 <p:tabView dynamic="false"><p:ajax event="tabChange" listener="#{tstTab.onDtlTabChanged}"/><p:tab title="tab1"><p:dataTable value="#{tstTab.list1}" var="v1"><p:列><h:outputText value="#{v1}"/></p:列></p:dataTable></p:tab><p:tab title="tab2"><p:dataTable value="#{tstTab.list2}" var="v2"><p:列><h:outputText value="#{v2}"/></p:列></p:dataTable></p:tab></p:tabView></h:form>

在 bean 内部(视图范围)

@ManagedBean@ViewScoped公共类 TstTab {私人列表<字符串>列表1；私人列表<字符串>列表2；公共 TstTab(){list1 = new ArrayList();list2 = new ArrayList();list1.add("列表 1 - Str 1");list1.add("List 1 - Str 2");list1.add("列表 1 - Str 3");list1.add("List 1 - Str 4");list1.add("List 1 - Str 5");list2.add("列表 2 - Str 1");list2.add("列表 2 - Str 2");list2.add("列表 2 - Str 3");list2.add("列表 2 - Str 4");list2.add("列表 2 - Str 5");}公共无效 onDtlTabChanged(TabChangeEvent 事件){System.out.println("000000000000000000");}公共列表<字符串>getList1() {System.out.println("11111111111111");返回列表1；}公共列表<字符串>getList2() {System.out.println("2222222222222222222");返回列表2；}

}

现在的问题是当运行应用程序并尝试在选项卡之间导航(更改)时，但我可以看到在调用 getter 之后调用了 onDtlTabChanged，所以这是一个大问题.>

如果将 tabView 从静态更改为动态，则行为是随机的，换句话说，对更改事件的调用发生在 getter 中间的某处.

提前致谢.

解决方案

嗯，我认为这是一个primefaces BUG，我找到了一个解决方法，如下

1. 不要使用全局表单(tabView 本身的表单)，而是为每个选项卡使用一个表单(在它里面围绕数据表)

2. 您必须添加一个虚拟标签才能成为第一个必须包含其中一些静态数据或预加载数据的表单的标签

仅此而已，

问题是 ajax 请求在全局表单中，它导致数据表在 ajax 请求之前首先获取它们的数据，Primefaces 的奇怪之处在于，如果您不添加第一个虚拟选项卡，它将始终执行选项卡内的第一个表单并获取其数据，这会导致问题

问候，

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.

解决方案

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 ,

这篇关于显示选项卡后触发 Primefaces tabview tabChange 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！