选择特定 Primefaces p:tab 时如何执行 javascript 函数答案

【问题标题】：How to execute a javascript function when a specific Primefaces p:tab is selected选择特定 Primefaces p:tab 时如何执行 javascript 函数
【发布时间】：2017-01-23 17:32:07
【问题描述】：

I need to execute a javascript function when a p:tab in a p:tabView is selected.我不需要任何后端方法，只需要执行一个简单的 javascript 函数。我已经尝试将“onclick”添加到 p:tab 标签，但这不起作用。

我总是可以使用 requestContext.execute() 执行后端 bean 方法并在那里执行 javascript，但看起来很奇怪。

谢谢

【问题讨论】：

尝试console.log(event) 或console.log(this) 并检查浏览器开发工具的所有功能。如果您根本不需要调用服务器端方法，您可以随时使用 PrimeFaces 扩展中的pe:javascript
你也可以查看客户端的api，tabWidget.getActiveIndex()（假设tabView的widgetVar是'tabWidget) and backwards Compatibility is on, otherwise it would be PF('tabWidget').getActiveIndex()`

标签： javascript primefaces

【解决方案1】：

就像@Kukeltje 所说，您可以通过客户端的widgetVar 属性访问Primefaces tabView 组件。它可以在 javascript 中调用PF('yourWidgetVar')（从 5.x 版开始）或简单地调用 yourWidgetVar（4.x 版及之前的版本，请参阅https://code.google.com/archive/p/primefaces/wikis/MigrationGuide.wiki）来访问。

Primefaces 用户指南 (http://www.primefaces.org/docs/guide/primefaces_user_guide_6_0.pdf) 中描述了 客户端小部件 API 和 客户端回调。

使用客户端 API 的示例

有一个名为getActiveIndex()的客户端函数，它返回当前活动Tab的索引（从0开始计数）。在示例中，alert 仅显示在第二个选项卡上：

<h:form>
    <p:tabView widgetVar="varTabView">
        <p:ajax event="tabChange" oncomplete="if (PF('varTabView').getActiveIndex() == 1) alert ('the 2nd tab');" />
        <p:tab title="Tab1" id="tab1">
            <h:outputText value="Tab1 content"/>
        </p:tab>
        <p:tab title="Tab2" id="tab2">
            <h:outputText value="Tab2 content"/>
        </p:tab>
    </p:tabView>
</h:form>

使用客户端回调的示例

您还可以在tabView 上使用onTabChange 属性/回调：

Javascript 回调：

<script type="text/javascript">
    function handleTabChange(selectedIndex) {
        alert("selected tab: " + selectedIndex);
    }
</script>

页面：

<h:form>
    <p:tabView onTabChange="handleTabChange(index)">
        <p:tab title="Tab1">
            <h:outputText value="Tab1 content"/>
        </p:tab>
        <p:tab title="Tab2">
            <h:outputText value="Tab2 content"/>
        </p:tab>
    </p:tabView>
</h:form>

【讨论】：