How to stay on the same tab after submitting a form

Question

I am using p:tab view like this

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

Here is my join.xhtml page

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

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

IF i am on tab join and then submit the form and if any validation fails, then i switch to first tab. I want that if i click on the submit button and whether validation fails or not i stay on the same tab. The same situation i am facing on the login tab. How can i stay on the same tab after submitting the form?

Thanks

Answer 1

I know this question is old but I just faced the same issue years later with primefaces 5.2. For your particular case there might be several solutions including for example only updating the content of your tab and not the full page. But I really had to reload the whole page (locale change):

To "remember" the activeTab you basically just have to bind the activeIndex in your view-scoped managedBean and specify a p:ajax event listener. BUT as your p:tabView is not in a form and the tabs themselves have their own forms there is some known issue with that: https://github.com/primefaces/primefaces/issues/695 The easiest workaround imho is setting partialSubmit of the p:ajax to true. So this is all it needs to set the activeIndex and stay on the tab as a result:

xhtml:

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

myManagedBean:

//plus its getter and setter
private Integer activeTabIndex;

EDIT: it might be enough to only specify <p:ajax event="tabChange" partialSubmit="true" /> as above without even binding the activeIndex. At least for my use case that was enough.

Answer 2

You can bind the tabview to a tabview object on the backing bean and set your active index there.

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

Then on 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);
}