0

我正在使用这样的 p:tab 视图

<ui:composition template="./WEB-INF/templates/masterTemplate.xhtml">
    <ui:define name="windowTitle">
        #{msgs.home}
    </ui:define>

    <ui:define name="content">
        <p:tabView id="tabView" dynamic="false">

            <p:tab id="tab1" title="#{msgs.home}">
                <ui:include src="/homePages/home.xhtml" />
            </p:tab> <!--end of tab1 -->

            <p:tab id="tab2" title="#{msgs.join}">
                <ui:include src="/homePages/join.xhtml" />
            </p:tab> <!--end of tab2 -->

            <p:tab id="tab3" title="#{msgs.signIn}">
                <ui:include src="/homePages/login.xhtml" />
            </p:tab> <!--end of tab3 -->

        </p:tabView>
    </ui:define>
</ui:composition>

这是我的 join.xhtml 页面

<h:body>
    <ui:composition>
        <div id="join" style="border-style:solid; border-width:5px; padding: 10px;" >
            <div id="joinFormPosition" class="left">
                <h:form id="joinForm">
                    <h:outputText id="joinMessgae" value="#{msgs.joinMessgae}" />
                    <span class="asterisk">*</span><span class="labels">#{msgs.signInName}: </span>
                    <p:inputText id="name"
                                 value="#{joinPage.signInName}"
                                 required="true"/>
                    <p:message for="name" />
                    ...

                    <div id="submitButton">
                        <h:commandButton id="submitBtn"
                                         value="Submit"
                                         actionListener="#{join.saveUser}" />
                    </div>
                </h:form>
            </div> <!--end of joinFormPosition  -->
        </div> <!--end of join  -->
    </ui:composition>
</h:body>

登录.xhtml

<ui:composition>

        <div id="login" style="border-style:solid; border-width:5px; padding: 10px;" >

            <div id="loginFormPosition" class="left">

                <h:form id="loginForm">
                    <h:outputText value="#{msgs.signIn}" />
                    .....
                    <div id="signInButton">
                        <h:commandButton id="signInBtn"
                                         value="Submit"
                                         actionListener="#{login.signIn}"
                                         action ="#{login.outcome}"/>
                    </div>
                </h:form>
            </div> <!--end of loginFormPosition  -->
        </div> <!--end of login -->
    </ui:composition>

如果我在选项卡加入，然后提交表单，如果任何验证失败，那么我切换到第一个选项卡。我希望如果我单击提交按钮并且验证是否失败，我会留在同一个选项卡上。我在登录选项卡上面临同样的情况。提交表单后如何保持在同一个选项卡上？

谢谢

4

2 回答 2

3

您可以将 tabview 绑定到支持 bean 上的 tabview 对象并在那里设置活动索引。

<p:tabView binding="#{myTabBean.messagesTab}">

然后在 myTabBean 上：

private TabView messagesTab = new TabView();

public TabView getMessagesTab () {
    return messagesTab;
}

public void setMessagesTab(TabView messagesTab ) {
    this.messagesTab = messagesTab;
}


public void someDecisionMethod(){
    int idx=1
    this.messagesTab.setActiveIndex(idx);
}
于 2012-05-11T12:54:21.380 回答
1

我知道这个问题很老，但几年后我在 primefaces 5.2 中遇到了同样的问题。对于您的特定情况，可能有几种解决方案，例如仅更新选项卡的内容而不是整页。但我真的不得不重新加载整个页面（区域设置更改）：

要“记住” activeTab，您基本上只需在视图范围的 managedBean 中绑定 activeIndex 并指定 ap:ajax 事件侦听器。但是由于您的 p:tabView 不在表单中，并且选项卡本身有自己的表单，因此存在一些已知问题：https ://github.com/primefaces/primefaces/issues/695恕我直言，最简单的解决方法是设置 partialSubmit p:ajax 为真。因此，这就是设置 activeIndex 并保留在选项卡上所需的全部内容：

xhtml:

<p:tabView activeIndex="#{myManagedBean.activeTabIndex}">
  <p:ajax event="tabChange" partialSubmit="true" />

我的托管豆：

//plus its getter and setter
private Integer activeTabIndex;

编辑：只指定<p:ajax event="tabChange" partialSubmit="true" />上述内容可能就足够了，甚至没有绑定 activeIndex。至少对于我的用例来说，这就足够了。

于 2016-01-26T12:03:47.947 回答