1 Reply Latest reply on Sep 15, 2010 8:38 PM by Chris Mathrusse

    Duplicate Component Ids when using ui:repeat

    Chris Mathrusse Newbie

      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...