PrimeFaces 5.0 中的 tabView 不调用 tabChange 事件答案

【问题标题】：tabView in PrimeFaces 5.0 doesn't call tabChange eventPrimeFaces 5.0 中的 tabView 不调用 tabChange 事件
【发布时间】：2014-10-07 18:33:21
【问题描述】：

我使用 PrimeFaces 5.0 和 jsf 2.2。这是我的页面，其中包含 PrimeFaces tabview

            <h:panelGroup layout="block" style="position:absolute;top:60px;width:100%;">
            <p:tabView id="tabs" activeIndex="#{TabsManagerBean.activeIndex}" onTabShow="$('#tvlistr').click();" dynamic="true"
                value="#{TabsManagerBean.tabs}" var="tab">
                <p:ajax event="tabChange" listener="#{TabsManagerBean.onTabChange}" />
                <p:tab title="#{tab}" titleStyle="width:180px" />
            </p:tabView>
            <p:commandLink id="tvlistr" style="display:none;" action="#{TabsManagerBean.navigate}"/>
        </h:panelGroup>

我的 onTabChange 方法

public void onTabChange(TabChangeEvent evt) {
    logger.debug("Tab changed to: {}.", evt.getData());
    selectedTab = (String) evt.getData();
    ...
}

还有这个方法没有被调用的问题。我需要先调用这个方法

<p:commandLink id="tvlistr" style="display:none;" action="#{TabsManagerBean.navigate}"/>

更新：这是我的 h:form

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<f:view locale="en">
    <h:head>
        <title>#{appMsg.common_pms}</title>
        <!--  main JavaScript file -->
        <h:outputScript name="js/main.js" />
    </h:head>

    <h:body>
        <h:form id="formId" prependId="false">

            <ui:include src="progressbar.xhtml" />

            <h:panelGroup id="header" layout="block" style="position:absolute;top:0;width:100%;height:90px;">
                <ui:include src="header.xhtml" />
            </h:panelGroup>

            <h:panelGroup layout="block" style="position:absolute;top:60px;width:100%;">
                <p:tabView id="tabs" activeIndex="#{TabsManagerBean.activeIndex}" onTabShow="$('#tvlistr').click();" dynamic="true"
                    value="#{TabsManagerBean.tabs}" var="tab">
                    <p:ajax event="tabChange" listener="#{TabsManagerBean.onTabChange}" />
                    <p:tab title="#{tab}" titleStyle="width:180px" />
                </p:tabView>
                <h:commandLink id="tvlistr" style="display:none;" action="#{TabsManagerBean.navigate}">
                    <f:ajax event="action" />
                </h:commandLink>
            </h:panelGroup>

            <h:panelGroup id="footer" layout="block" style="position:absolute;height:20px;width:100%;bottom:0;background-color: #005696">
                <ui:include src="/templates/version.xhtml" />
            </h:panelGroup>

        </h:form>
    </h:body>
</f:view>

【问题讨论】：

你能给我们看看 h:form 吗？
是否调用了TabsManagerBean.activeIndex，或者您是否可以通过命令链接调用TabsManagerBean.navigate？
@Smutje，TabsManagerBean.activeIndex 被调用，TabsManagerBean.navigate 也被调用，仅TabsManagerBean.onTabChange 未被调用
您是否检查过任何使用 p:message 标签的错误消息，或者页面上的任何 js 错误？
@EmilKaminski，没有错误，我只需要进入onTabChange方法

标签： jsf jsf-2 primefaces onchange tabview

【解决方案1】：

我在使用 Primefaces 5.1 时遇到了类似的问题

只要我将 tabview 放入表单中，一切正常。但是因为我想在我的选项卡中使用单独的表单，所以我不得不删除 tabview 的周围表单以避免嵌套表单。如果没有周围的表单，则在更改选项卡时不会再触发 ajax 事件。

我的解决方案是使用与 tabview 平行的形式的远程命令。
远程命令由 tabview 元素的 onTabChange 属性触发。在那次调用中，我将索引参数转发到全局请求参数。

<p:tabView id="rootTabMenu" styleClass="tabcontainer" prependId="false" 
        activeIndex="#{sessionData.activeTabIndex}" widgetVar="rootTabMenu"
        onTabChange="tabChangeHelper([{name: 'activeIndex', value: index}])">
    // Tabs...  
</p:tabView>

<h:form id="tabChangeHelperForm">
    <p:remoteCommand name="tabChangeHelper" actionListener="#{sessionData.onTabChange()}" />
</h:form>

在支持 bean 中，我再次从请求参数映射中捕获值并设置活动索引。

public void onTabChange()
{   
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> paramMap = context.getExternalContext().getRequestParameterMap();
    String paramIndex = paramMap.get("activeIndex");
    setActiveTabIndex(Integer.valueOf(paramIndex));
    System.out.println("Active index changed to " + activeTabIndex);
}

希望对你有帮助

【讨论】：

【解决方案2】：

这可能是与动态构建的选项卡相关的错误。删除“var”和“value”并呈现静态标签将导致监听器正确触发。可能想要提交错误报告。

<p:tabView id="tabs" activeIndex="#{TabsManagerBean.activeIndex}" onTabShow="$('#tvlistr').click();" dynamic="true">            
        <p:ajax event="tabChange" listener="#{TabsManagerBean.onTabChange}" />
         <p:tab title="First tab" titleStyle="width:180px" />
         <p:tab title="Second tab" titleStyle="width:180px" />
 </p:tabView>

【讨论】：