JSF datatable: adding and removing rows clear rows values

Question

I have a h:datatable showing a list of rows, and the fields of each row are input fields.

I render an "Add Row" button before the table, and a "Remove Row" button on each row of the table.

The baking bean is viewScoped, and the buttons add/remove elements from the java list in the backing bean, and then return to the same view.

I set the immediate attribute to "true" in the buttons in order to not validate the input fields when I add or remove a row.

Everything works ok but one thing: the values of the input fileds are cleared. I thought that the view kept the values beacuse the bean is viewScoped.

How can I achieve adding/removing rows without triggering validations and keeping the values that were already typed by the user in the form?

My view:

<h:form>
    <h:commandButton value="Añadir Fila" immediate="true" action="#{tablaController.addRowAction}" />
    <h:dataTable value="#{tablaController.lista}" var="fila" cellpadding="0" cellspacing="0" border="1">
        <f:facet name="header">TABLA</f:facet>
        <h:column>
             <f:facet name="header"><h:outputLabel value="NOMBRE" /></f:facet>
             <h:inputText id="nom" value="#{fila.nombre}" />
             <h:message for="nom" class="msjError" />
        </h:column>
        <h:column>
            <f:facet name="header"></f:facet>
            <h:commandButton value="Quitar Fila" immediate="true" action="#{tablaController.removeRowAction(fila)}" />
        </h:column>
    </h:dataTable>
</h:form>

My backing bean:

@ManagedBean(name="tablaController")
@ViewScoped
public class TablaController {

private List<Fila> lista;
...
public TablaController() { }
...
@PostConstruct
public void init() {
    this.lista = new ArrayList<Fila>();
    for (int i=0; i<5; i++) {
        Fila fila = new Fila();
        fila.setNombre("");
        this.lista.add(i,fila);
    }
}
...
public String addRowAction () {
    Fila fila = new Fila();
    fila.setNombre("");
    this.lista.add(fila);
    return "";
}

public String removeRowAction (Fila f) {
    boolean exito = this.lista.remove(f);
    return "";
}
...
}

UPDATE --> MY SOLUTION:

I write here my solution if someone is interested.

The problem is that I use immediate="true" to skip validations, but this makes to skip the update_model_values too, so that the values entered by the user in the form are lost after clicking the add/remove buttons and re-redenring the page.

As I use "JSR-303 bean validation", my solution was to skip validations using the f:validateBean to enable/disable them. Depending on the button I click, if I want the validations to execute, I enable the bean validation (for example in a "submit" button), and if I want to skip them, I disable bean validation (like in the add/remove row buttons). But anyway the update_model_values always executes, so the values are not lost.

Here's the view:

<h:form>
    <f:validateBean disabled="#{!empty param['disableValidation']}">
        <h:commandButton value="Añadir Fila" action="#{tablaController.addRowAction}">
            <f:param name="disableValidation" value="true" />
        </h:commandButton>
        <h:dataTable value="#{tablaController.lista}" var="fila" cellpadding="0" cellspacing="0" border="1">
            <f:facet name="header">TABLA</f:facet>
            <h:column>
                <f:facet name="header"><h:outputLabel value="NOMBRE" /></f:facet>
                <h:inputText id="nom" value="#{fila.nombre}" />
                <h:message for="nom" class="msjError" />
            </h:column>
            <h:column>
                <f:facet name="header"></f:facet>
                <h:commandButton value="Quitar Fila" action="#{tablaController.removeRowAction(fila)}">
                    <f:param name="disableValidation" value="true" />
               </h:commandButton>
            </h:column>
        </h:dataTable>
        <h:commandButton value="Submit" action="#{tablaController.saveData}" />
    </f:validateBean>
</h:form>

The backing bean:

@ManagedBean(name="tablaController")
@ViewScoped
public class TablaController {

private List<Fila> lista;
...
public TablaController() { }
...
@PostConstruct
public void init() {
    this.lista = new ArrayList<Fila>();
    for (int i=0; i<5; i++) {
        Fila fila = new Fila();
        fila.setNombre("fila "+i);
        this.lista.add(i,fila);
    }
}
...
public String addRowAction () {
    Fila fila = new Fila();
    fila.setNombre("");
    this.lista.add(fila);
    return "";
}

public String removeRowAction (Fila f) {
    this.lista.remove(f);
    return "";
}
...
public String saveData () {
    ...
    //processes the valid data
    //for example, calls to a service method to store them in a database
    ...
    return "";
}
...
}

hi i have the same problem, good solution. but have you an idea how to disable built-in validators, like "required=true" ? — wutzebaer
You can put required="#{empty param['disableValidation']}". This way the field will be required or not depending on the button you click. You pass the "disableValidation" param if you want to disable the required atribute. — choquero70
@choquero70 You should post your answer separately. Don't just add it to the question. That way, it will be easier for SO users to parse and understand it. — Gaurav Sharma

BalusC BalusC · Accepted Answer · 2013-07-11T15:46:58

I set the immediate attribute to "true" in the buttons in order to not validate the input fields when I add or remove a row.

immediate="true" is the wrong tool for the job. It should be used to prioritize validation, not to enable/disable validation. The difference is rather huge as you encountered yourself.

You want to trigger validation conditionally. In case of e.g. required="true" that'd be as easy as

<h:inputText ... required="#{saveButtonPressed}" />

where #{saveButtonPressed} evaluates true when the save button is pressed. E.g. when its client ID is present in request parameter map.

In case of JSR 303 bean validation, that'd be a matter of

<f:validateBean disabled="#{not saveButtonPressed}">
    <h:inputText ... />
</f:validateBean>

or with OmniFaces <o:validateBean> which allows controlling that on a per-command basis.

<h:commandButton id="add" ...>
    <o:validateBean disabled="true" />
</h:commandButton>

JSF datatable: adding and removing rows clear rows values

2 Answers