Primefaces TabView does not maintain selectOneMenu Values

StackOverflow https://stackoverflow.com/questions/17395832

Question

Hi I have a primefaces tabView looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
    <h:head></h:head>
    <h:body>
        <p:messages />
        <h:form id="form">
            <p:tabView dynamic="true">
                <p:tab title="Tab">
                    <p:inputText required="true" value="value"></p:inputText>
                </p:tab>
                <p:tab title="Select">
                    <p:selectOneMenu value="#{dummyController.selectedValue}" id="select" required="true" requiredMessage="Select is required">
                        <f:selectItem itemValue="1" itemLabel="asd"></f:selectItem>
                        <f:selectItem itemValue="2" itemLabel="qwe"></f:selectItem>
                        <f:selectItem itemValue="3" itemLabel="zc"></f:selectItem>
                    </p:selectOneMenu>
                    <p:message for="select" />
                </p:tab>
                <p:tab title="Tab">
                    <p:inputText required="true" value="value"></p:inputText>
                </p:tab>
            </p:tabView>
            <h:commandButton action="#{dummyController.submit}" />
        </h:form>
    </h:body>
</ui:composition>

and it's controller

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class DummyController implements Serializable {

    private static final long serialVersionUID = 1L;
    private int selectedValue;

    public void submit() {

    }

public int getSelectedValue() {
    return selectedValue;
}

public void setSelectedValue(int selectedValue) {
    this.selectedValue = selectedValue;
}

}

it has a strange behaviour, follow the steps tp reproduce:

  • open the Select tab
  • open other tab
  • press Submit twice

the first press nothing happens as regular, the next press triggers required message for the select, though it always has a value

Please tell if something is missing or if there are any solutions

Was it helpful?

Solution

There's no direct solution to this, it's a bug in primefaces tabView, I came with this workaround and worked

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
    <h:head></h:head>
    <h:body>
        <p:messages />
        <h:form id="form">
            <p:tabView dynamic="true" activeIndex="#{dummyController.activeindex}" >
                <p:tab title="Tab" id="tab1">
                    <p:inputText required="true" value="value"></p:inputText>
                </p:tab>
                <p:tab title="Select" id="selectTab">
                    <p:selectOneMenu disabled="#{dummyController.activeindex != 1}" value="#{dummyController.selectedValue}" id="select" required="true" requiredMessage="Select is required">
                        <f:selectItem itemValue="" itemLabel=""></f:selectItem>
                        <f:selectItem itemValue="1" itemLabel="asd"></f:selectItem>
                        <f:selectItem itemValue="2" itemLabel="qwe"></f:selectItem>
                        <f:selectItem itemValue="3" itemLabel="zc"></f:selectItem>
                    </p:selectOneMenu>
                    <p:message for="select" />
                </p:tab>
                <p:tab title="Tab" id="tab3">
                    <p:inputText required="true" value="value"></p:inputText>
                </p:tab>
            </p:tabView>
            <h:commandButton action="#{dummyController.submit}" />
        </h:form>
    </h:body>
</ui:composition>

and the controller :

package com.ibm.sa.kap.ui.controller;

import java.io.Serializable;

@ManagedBean
@ViewScoped
public class DummyController implements Serializable {

    private static final long serialVersionUID = 1L;

    private int selectedValue;

    private int activeindex;

    public void submit() {

    }

    public int getSelectedValue() {
        return selectedValue;
    }

    public void setSelectedValue(int selectedValue) {
        this.selectedValue = selectedValue;
    }

    public int getActiveindex() {
        return activeindex;
    }

    public void setActiveindex(int activeindex) {
        this.activeindex = activeindex;
    }

}

it's a conditional disabled according to the tab index, so that to prevent the tabview from resetting the value, how dirty !!

OTHER TIPS

Unfortunatelly, the implementation of p:tabView with dynamic="true" is buggy. There are various issues: http://code.google.com/p/primefaces/issues/list?can=2&q=tabView+dynamic&colspec=ID+Type+Status+Priority+TargetVersion+Reporter+Owner+Summary&y=5000&cells=tiles but the most affected are the components such as p:selectOneMenu.

I've had this issue in my own project - the values from select lists were not submitted, if they were on the other tab as active. The solution is - don't use dynamic tabs, as long as they won't be fixed. There are too many bugs within.

Another thing that doesn't work, is to update the tab view from the ajax event onTabChange.

Because <p:selectOneMenu needs value to save element choosen.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top