Duplicate Component Ids when using ui:repeat
I'm using JSF2 with RichFaces 4.0.0.20100715-M1 running inside of GlassFish 3.0.1. I'm using a ui:repeat to iterate over a list of objects but it seems that the component ids are being duplicated for each component within the iteration. Below is my xhtml code. From the records that I am iterating over there are 3 drop-down lists generated. When a list item is selected I rerender a datatable that should display an input text area. The issue is that each of the datatables are getting the same id, form:j_idt19:select-one-menu-add-info-table, so only one table is getting rerendered.
<ui:repeat var="record" value="#{survey.records}">
<h:panelGroup id="select-one-menu-answer-panel" layout="block" rendered="#{record.type eq 'LIST'}">
<s:question componentId="select-one-menu" question="#{record.question}" />
<h:panelGroup id="select-one-menu-panel" layout="block" styleClass="answer-select-one-list-class">
<h:panelGrid id="select-one-menu-grid" columns="1">
<h:message for="select-one-menu" errorClass="validation-error-class" />
<h:selectOneMenu id="select-one-menu"
value="#{record.singleChoiceAnswer.currentChoice}"
valueChangeListener="#{record.singleChoiceAnswer.processSingleSelectValueChange}"
layout="pageDirection"
label="#{record.question.name}"
required="#{record.question.required}"
disabled="#{record.editable}">
<f:selectItem itemLabel="--" itemValue="" />
<f:ajax render="select-one-menu-add-info-table"/>
<f:selectItems value="#{record.singleChoiceAnswer.choices}" />
</h:selectOneMenu>
<h:dataTable id="select-one-menu-add-info-table"
var="listchoice"
value="#{record.question.choiceSet.choices}">
<h:column>
<h:outputText value="#{listchoice.helpText}"
rendered="#{listchoice.additionalInfo and record.singleChoiceAnswer.currentChoice == listchoice}" />
<f:verbatim rendered="#{!listchoice.additionalInfo}">
<br />
</f:verbatim>
</h:column>
<h:column>
<h:message for="select-one-menu-add-info-input" errorClass="validation-error-class" />
<h:inputText id="select-one-menu-add-info-input"
required="true"
value="#{record.singleChoiceAnswer.selectionText.selectionText}"
rendered="#{listchoice.additionalInfo and record.singleChoiceAnswer.currentChoice == listchoice}"
label="Additional Information"
disabled="#{record.editable}">
<f:ajax listener="#{record.singleChoiceAnswer.additionalInfoValueChange}"/>
</h:inputText>
<f:verbatim rendered="#{!listchoice.additionalInfo}">
<br />
</f:verbatim>
</h:column>
</h:dataTable>
</h:panelGrid>
</ui:repeat>
Here is the generated HTML:
><div id="form:j_idt19:0:select-one-menu-answer-panel"><div class="question-text-class"><label for="form:j_idt19:0:select-one-menu"> <span title="What type of room does the student have?">What type of room does the student have?</span></label></div><div id="form:j_idt19:0:select-one-menu-panel" class="answer-select-one-list-class"><table id="form:j_idt19:0:select-one-menu-grid"> <tbody> <tr> <td></td> </tr> <tr> <td><select id="form:j_idt19:0:select-one-menu" name="form:j_idt19:0:select-one-menu" size="1" onchange="mojarra.ab(this,event,'valueChange',0,'form:j_idt19:select-one-menu-add-info-table')"> <option value="">--</option> <option value="7">Own</option> <option value="8">Shared</option> </select></td> </tr> <tr> <td><table id="form:j_idt19:select-one-menu-add-info-table"> <tbody> <tr> <td> <br/> </td> <td> <br/> </td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div></div><div id="form:j_idt19:1:select-one-menu-answer-panel"><div class="question-text-class"><label for="form:j_idt19:1:select-one-menu"> <span title="Rate the overall cleanliness of the home by selecting a one of the choices below.">How would you describe the general cleanliness of the home?</span></label></div><div id="form:j_idt19:1:select-one-menu-panel" class="answer-select-one-list-class"><table id="form:j_idt19:1:select-one-menu-grid"> <tbody> <tr> <td></td> </tr> <tr> <td><select id="form:j_idt19:1:select-one-menu" name="form:j_idt19:1:select-one-menu" size="1" onchange="mojarra.ab(this,event,'valueChange',0,'form:j_idt19:select-one-menu-add-info-table')"> <option value="">--</option> <option value="1">Excellent</option> <option value="2">Average</option> <option value="3">Fair</option> <option value="4">Poor</option> </select></td> </tr> <tr> <td><table id="form:j_idt19:select-one-menu-add-info-table"> <tbody> <tr> <td> <br/> </td> <td> <br/> </td> </tr> <tr> <td> <br/> </td> <td> <br/> </td> </tr> <tr> <td> <br/> </td> <td> <br/> </td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div></div>
What am I doing wrong and how can I ensure that each datatable will receive a unique id?
Thanks for the help...