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...
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);
}
}
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++;
}
}