如何使用带有 primefaces 和 Ajax 的 JSF 通过单击菜单列表打开特定的 tabView

Question

我不知道如何从 header.xhtml 页面的菜单列表中打开特定的 tabview 单击。 tabview 在 userprofile.xhtml 页面的另一个页面中。在该页面中，我有 ajax 呼叫特定的监听器。当我单击特定选项卡时，我已经打开了。但我不知道如何从其他页面点击并呈现特定的 tabView。

我必须从 header.xhtml 菜单中点击交易历史，然后该选项卡才会打开。如果当我单击“更改密码”时，“更改密码”选项卡已打开。

当我单击“交易历史记录”然后该选项卡打开时，它来自 userprofile.xhtml 页面。如果当我单击“更改密码”时，“更改密码”选项卡将打开。来自 ul li 列表的菜单项的问题将不起作用。

我将在下面显示每个文件的代码。

1.header.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">

<h:panelGroup rendered="#{webUserBean.valid}">
                    <ul class="navlink-group link-group">
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            id="memberLogin" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">Hello #{webUserBean.userName}</a>
                            <div class="user-icon d-none">
                                <a data-toggle="dropdown" href="#" role="button"
                                    aria-haspopup="true" aria-expanded="false"> <!-- <span class=""><i class="fa fa-user" aria-hidden="true" style="line-height: 18px;"></i></span> -->
                                </a>
                            </div>

                            <div class="top-links-dropdown dropdown-menu dropdown-menu-end"
                                aria-labelledby="memberLogin">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Welcome</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="dropdown-form dd-user-loggedin">

                                            <ul class="navlink-group link-group">
                                                <li class="dropdown"><a class="nav-link" id="target" name="tabs"
                                                    href="my-transactions">Transaction History</a></li>

                                                <li class="dropdown"><a class="nav-link" id="target1" name="tabs"
                                                    href="edit-Profile">View/Edit Profile</a></li>

                                                <li class="dropdown"><a class="nav-link" id="target2" name="tabs"
                                                    href="reset-password-user">Change Password</a></li>

                                                <li><h:form>
                                                        <p:commandLink value="Sign Out" id="ajax" rendered="false"
                                                            action="#{signinController.logout}" ajax="false">
                                                        </p:commandLink>

                                                        <p:commandButton value="Sign Out" class="nav-link"
                                                            action="#{signinController.logout}"></p:commandButton>
                                                    </h:form></li>
                                            </ul>


                                        </div>
                                    </div>
                                </div>
                            </div></li>
                    </ul>
                </h:panelGroup>
</ui:composition>

2.userprofile.xhtml

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:common="http://java.sun.com/jsf/composite/components/common"
    template="/home.xhtml">
<p:tabView id="tab" activeIndex="#{panelDisplayBean.profileActiveTabIndex}" tabindex="#{panelDisplayBean.profileActiveTabIndex}">
                    <p:ajax event="tabChange"
                        listener="#{userDetailsController.onProfileTabChange}"
                        global="false" />
                    <p:tab id="tab1">
                    <ui:insert name="my-transactions">
                        <ui:include src="my-transactions.xhtml" />
                    </ui:insert>
                    </p:tab>
                    <p:tab id="tab2">
                    <ui:insert name="edit-profile">
                        <ui:include src="edit-profile.xhtml" />
                    </ui:insert>
                    </p:tab>
                    <p:tab id="tab3">
                    <ui:insert name="reset-password">
                        <ui:include src="reset-password.xhtml" />
                    </ui:insert>    
                    </p:tab>    
                </p:tabView> 
</ui:composition>

3.UserDetailsController.java

public void onProfileTabChange(TabChangeEvent event) {
        UITabPanel tabView = (UITabPanel) event.getComponent();
        int activeTab = tabView.getChildren().indexOf(event.getTab());
        logger.debug("tabView.getActiveIndex()=" + activeTab);
        panelDisplayBean.setProfileActiveTabIndex(activeTab);
    }

Answer 1

我创建了一个 javascript 并将该函数放入每个锚标记中，并将 widgetWar 添加到 tabView 的 userprofile.xhtml 中。
感谢@Jasper de Vries 给我想法。我已经通过你的代码解决了这个问题。

1.header.xhtml

            <script type="text/javascript">
                function myTransactions() {
                     PF('tabPanelWidget').select($('#target' ).attr('data-value'));
                }
                function viewOrEditProfile() {
                    PF('tabPanelWidget').select($('#target1' ).attr('data-value'));
                }
                function chengePassword() {
                    PF('tabPanelWidget').select($('#target2' ).attr('data-value'));
                }       
            </script>

header.xhtml

<ul class="navlink-group link-group">
    <li class="dropdown"><a class="nav-link" id="target"
        href="my-transactions" onclick="myTransactions();" data-value="0">Transaction History</a></li>

    <li class="dropdown"><a class="nav-link" id="target1"
        href="edit-Profile" onclick="viewOrEditProfile();" data-value="1">View/Edit Profile</a></li>

    <li class="dropdown"><a class="nav-link" id="target2"
        href="reset-password-user" onclick="chengePassword();" data-value="2">Change Password</a></li>

    <li><h:form>
            <p:commandLink value="Sign Out" id="ajax" rendered="false"
                action="#{signinController.logout}" ajax="false">
            </p:commandLink>

            <p:commandButton value="Sign Out" class="nav-link"
                action="#{signinController.logout}"></p:commandButton>
        </h:form></li>
</ul>

如何使用带有 primefaces 和 Ajax 的 JSF 通过单击菜单列表打开特定的 tabView

how to open particular tabView from click on menu list using JSF with primefaces and Ajax

ajax

jsf

primefaces