input binding in ui:repeat in jsf

Question

i am using facelets jsf 2.0 with primefaces 3.0.M2 component library. i am trying to achieve dynamic numbers of rows including iput fields that are filled when a datatable selection occurs.

whenever a selection is made the dynamic rows generated correctly with input fields but after the first selection for following selections dynamic row count changes correctly but the input fields does not update and keeps showing inputs from the first selection.

here is how i iterate list in facelet;

<ui:repeat value="#{goalEntranceBean.selectedCard.parameterList}" var="prmBean" >
        <li><h:outputText value="#{prmBean.lookUp.value}"/></li>
        <li>

            <h:outputText value="Weight:"/>
            <p:inputText id="wx" required="true" value="#{prmBean.weight}">
            </p:inputText>
            <h:outputText value="Percent:"/>
            <p:inputText required="true" value="#{prmBean.percent}">
            </p:inputText>
        </li>

    </ui:repeat>

my bean where i get the list of cards and set the selectedCard with rowSelect event in datatable.

@ManagedBean(name = "goalEntranceBean")
@ViewScoped
public class GoalEntranceAction implements Serializable {

private List<ScoreCard> personalCards = new ArrayList<ScoreCard>();

    private ScoreCard selectedCard = new ScoreCard();
......
}

when i checked in debug mode i can see the true list but in screen the elements does not change.

Answer 1

This is a common problem (gets asked every couple of days). To make long story short, inputs inside ui:repeat do not work, period.

It is a problem with JSF, a long standing, famous one. Maybe it will be fixed. Maybe not, it seems that no one really cares (I mean - an input? in a... ui:repeat? such crazy scenario!).

A quick-fix is to use a h:dataTable, possibly ungodly abused with css to make it look like a list. A long-fix is to use some iterator from a different library. Primefaces has an element that should work that renders an unordered list.

Answer 2

thanks for your replies. Sorry for forget sharing the solution. As i mentioned above i have primefaces datatable. On row selection event i render datatable and want to update the cells of that datatable. USING p:inputtext easily solved my problem. Now i can change the data on screen and i can see the values after update operation on screen. I don't understand the reason but it works.

  <p:dataTable var="orgPrmBean"
                 value="#{scoreCardOperationsBean.selectedCard.orgParameterList}"
                 emptyMessage="#{labels.norecord}"
                 rowKey="#{orgPrmBean.id}"
            >

        <p:columnGroup type="header">
            <p:row>
                <p:column headerText="Parameters" colspan="3" style="text-align:left;width:480;"/>
            </p:row>
        </p:columnGroup>


        <p:column style="text-align:left;width:200px;">
            <h:outputText value="#{orgPrmBean.info}"/>
        </p:column>

        <p:column style="text-align:left;width:180px;">
            <p:inputText value="#{orgPrmBean.weight}"
                         rendered="#{scoreCardOperationsBean.selectedCard.goalEdit}">
                <f:convertNumber maxFractionDigits="0"/>
            </p:inputText>

        </p:column>  

    </p:dataTable>

Answer 3

It IS possible to make it work, but the solution is to bind the inputs to a backing bean, and update the values of the controls in the backing bean via listeners (using the new value received in the argument). Obviously this isn't a good solution if you have a complex form, as you need to add a listener/control in the backing bean for each control in the page, but it's practical if you just have one or two inputs.