javascript - 如何在特定 Primefaces p :tab is selected 时执行 JavaScript 函数

Question

当选择 p:tabView 中的 p:tab 时，我需要执行 JavaScript 函数。我不需要任何后端方法，只需要执行一个简单的 javascript 函数。我尝试将“onclick”添加到 p:tab 标记，但这不起作用。

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

谢谢

Answer 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()的客户端函数，它返回当前事件选项卡的索引(从0开始计数)。在示例中，警报仅显示在第二个选项卡上:

<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>