Is There a Simple Way to Navigate Between Tabs of Tabview with Primefaces Without Using Wizard?

I am trying to do a page with 3 tabs and I want user to navigate between tabs by "next" and "back" buttons without using wizard. But user cannot navigate after second tab. Where is the mistake I could not find? Here is my html code:

<?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <ui:composition xmlns=""
        xmlns:ui=""
        xmlns:h=""
        xmlns:f=""
        xmlns:p=""
        xmlns:c=""
        template="template/template.xhtml">

        <ui:define name="body">

        <h:form  prependId="false" id="form">
        <p:tabView id="tabPanel" widgetVar="tabPanel" binding="#{myBean.tabView}" dynamic="true">

        <!-- FIRST TAB -->
                <p:tab id="person" title="Person">
                    <h:panelGrid columns="2" cellpadding="10">              
                     <h:outputText value="name" />
                     <p:inputText value="#{myBean.user.firstname}" label="Name" </p:inputText> 
    <p:commandButton  value="NEXT" action="#{myBean.nextButton}" update=":form:tabPanel" immediate="true"/>
               </h:panelGrid>
    </p:tab>                     

 <!-- SECOND TAB -->
                <p:tab id="adres" title="Address">
                    <h:panelGrid columns="2" cellpadding="10">
                      <h:outputText value="Phone" />
                      <p:inputMask id="phone" value="#{myBean.user.phone}" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/>
    <p:commandButton  value="NEXT" action="#{myBean.nextButton2}" update=":form:tabPanel" immediate="true"/>
  </h:panelGrid>
    </p:tab>

                <!-- THIRD TAB -->
                <p:tab title="Contact">
                    <h:panelGrid columns="2" cellpadding="10">

                    </h:panelGrid>
                </p:tab>             

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

And Here is my myBean:

@ManagedBean(name = "myBean") 
@ViewScoped 
public class MyBean implements Serializable {

private User user = new User(); 

 private TabView tabView;

    public TabView getTabView() {
        return tabView;
    }

    public void setTabView(TabView tabView) {
      this.tabView = tabView;
    }

    public void nextButton()
    {
        tabView.setActiveIndex(1);
    }

    public void nextButton2()
    {
        tabView.setActiveIndex(2);
    }
}
2

1 Answer

Approach 1

You have some unclosed Tags. After i changed the code as follows and it worked for me.

tabs.xhtml

<h:form  prependId="false" id="form">
    <p:tabView id="tabPanel" widgetVar="tabPanel" binding="#{myBean.tabView}" dynamic="true" activeIndex="0">

        <!-- FIRST TAB -->
        <p:tab id="person" title="Person">
            <h:panelGrid columns="2" cellpadding="10">              
                <h:outputText value="name" />
                <p:inputText value="???USERINFO???" label="Name" />
                <p:commandButton  value="NEXT" action="#{myBean.nextButton}" update=":form:tabPanel" immediate="true"/>
           </h:panelGrid>
        </p:tab>


        <!-- SECOND TAB -->
        <p:tab id="adres" title="Address">
            <h:panelGrid columns="2" cellpadding="10">
                <h:outputText value="Phone" />
                <p:inputMask id="phone" value="???USERINFO???" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/>
                <p:commandButton  value="NEXT" action="#{myBean.nextButton2}" update=":form:tabPanel" immediate="true"/>
            </h:panelGrid>
        </p:tab>

        <!-- THIRD TAB -->
        <p:tab title="Contact">
            <h:panelGrid columns="2" cellpadding="10">
                <h:outputText value="CONTACT" />
            </h:panelGrid>
        </p:tab>    
    </p:tabView>
</h:form>

MyBean.java

@ManagedBean(name = "myBean") 
@RequestScoped
public class MyBean implements Serializable {

    private static final long serialVersionUID = 2431097566797234783L;

    private TabView tabView;

    public TabView getTabView() {
        return tabView;
    }

    public void setTabView(TabView tabView) {
      this.tabView = tabView;
    }

    public void nextButton()
    {
        tabView.setActiveIndex(1);
    }

    public void nextButton2()
    {
        tabView.setActiveIndex(2);
    }
}

Approach 2

For me switching from ViewScopedto RequestScopeddid the trick. If i were you, i would do the following:

Remove the binding from the tabView.

<p:tabView id="tabPanel" widgetVar="tabPanel" dynamic="true">

Switch tabs with JavaScript.

<p:button onclick="PF('tabPanel').select(1);return false;" value="NEXT" />

...instead of...

<p:commandButton  value="NEXT" action="#{myBean.nextButton}" update=":form:tabPanel" immediate="true"/>

Approach 3

This third approach works with ViewScoped bean and without binding.

Remove the binding and map the activeIndex of the TabView to a property.

<p:tabView id="tabPanel" dynamic="true" activeIndex="#{myBean.activeIndex}">

On the next button, call an action which increments the activeIndex property.

<p:commandButton  value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" />

tabs.xhtml

<h:form id="form">
    <p:tabView id="tabPanel" dynamic="true" activeIndex="#{myBean.activeIndex}">

        <!-- FIRST TAB -->
        <p:tab id="person" title="Person">
            <h:panelGrid columns="2" cellpadding="10">              
                <h:outputText value="name" />
                <p:inputText value="???USERINFO???" label="Name" />
                <p:commandButton  value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" />
            </h:panelGrid>
        </p:tab>                     

        <!-- SECOND TAB -->
        <p:tab id="adres" title="Address">
            <h:panelGrid columns="2" cellpadding="10">
                <h:outputText value="Phone" />
                <p:inputMask id="phone" value="???USERINFO???" mask="1999999999" required="true" requiredMessage="ERROR AT PHONE NUMBER"/>
                <p:commandButton  value="NEXT" action="#{myBean.nextTab}" update=":form:tabPanel" />
            </h:panelGrid>
        </p:tab>

        <!-- THIRD TAB -->
        <p:tab id="contact" title="Contact">
            <h:panelGrid columns="2" cellpadding="10">

            </h:panelGrid>
        </p:tab>             

    </p:tabView>
</h:form>   

MyBean.java

@ManagedBean(name = "myBean") 
@ViewScoped
public class MyBean implements Serializable {

    private int activeIndex = 0;

    public int getActiveIndex() {
        return activeIndex;
    }

    public void setActiveIndex(int activeIndex) {
        this.activeIndex = activeIndex;
    }

    public void nextTab() {
        activeIndex++;
    }
}
12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Robert Thorne

Robert Thorne

Automotive & Future Transportation Editor

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.

Share this article
Twitter Facebook Pinterest