Nested datatables and inputText with duplicates id

[Francisco Lopez]

Hi I have a form in which I require the use of nested datatables for capturing some data. But I'm having a problem with those nested datatables, and that is that when the page get displayed, different inputText in the subtable has gotten the same id.



Here is the code:

  
<h:dataTable id="tablaSbu" border="1" value="#{encuestaDistribucionGastos.sbuLista}" var="encuestaVO" rendered="#{not empty encuestaDistribucionGastos.sbuLista}">
					  <h:column>  
					    <f:facet name="header">  
                                 <h:outputText value="Unidad de Negocio SBU"/>  
                        </f:facet>
                         <h:outputText value="#{encuestaVO.nombreSbu}" style="font-family: Tahoma, Verdana, Arial, Sans-Serif; font-size: 14px; font-weight: bold; font-style: normal"/>
                       </h:column>
                       
                      <h:column>  
                        <f:facet name="header">  
                                 <h:outputText value="Porcentaje Total Asignado a la SBU"/>  
                        </f:facet> 
                        <h:inputText id="porcentajeSbu" value="#{encuestaVO.porcentajeSbu}" maxlength="4" size="4" onchange="ScriptEncuesta.getNumeroSbus(replyTotal);"  onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
							<f:validateDoubleRange minimum="0" maximum="100"></f:validateDoubleRange>
						</h:inputText>
						<h:message for="porcentajeSbu"></h:message>
						<script type='text/javascript'>
						    var replyTotal = function(data)
						    {
							  var subtotal  = 0;
							  for (var i=0;i<data;i++) 
							  {
								subtotal = subtotal + (DWRUtil.getValue('formPrincipal:tablaSbu:'+i+':porcentajeSbu')*1);
							  }
						      DWRUtil.setValue('formPrincipal:totalPorcentaje', DWRUtil.toDescriptiveString(subtotal, 1));
						    }
						 </script>
					  </h:column>

					  <h:column>  
					    <f:facet name="header">  
                                 <h:outputText value=""/>
                        </f:facet>  
						<f:subview id="subTabla">
                          <h:dataTable title="#{encuestaVO.nombreSbu}"  value="#{encuestaVO.datosEncuesta}" var="sbuProc" rendered="#{not empty encuestaVO.datosEncuesta}">
                         	<h:column>
							    <f:facet name="header">  
		                                 <h:outputText value=""/>  
		                        </f:facet>
		                        <h:outputText value="#{sbuProc.encProSbu.encProcedimientos.nombre}" />
           					</h:column>
           					<h:column>  
							    <f:facet name="header">  
		                                 <h:outputText value=""/>  
		                        </f:facet>
		                        <h:inputText  title="#{sbuProc.encProSbu.encProcedimientos.nombre}" value="#{sbuProc.porcentajeMostrar}" maxlength="4" size="4"  onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" >
										<f:validateDoubleRange minimum="0" maximum="100"></f:validateDoubleRange>
								</h:inputText>
								
							</h:column>
                          </h:dataTable>
						</f:subview>
                      </h:column>

					</h:dataTable>

  

This is the HTML that I get: As we can see in the lines 23 and 46, the assigned id's are the same for two different inputs. :S

 <span style="border-style: solid;border-color: #CCCCCC;border-width: 1px;"><table id="formPrincipal:tablaSbu" border="1">
<thead>
<tr>
<th scope="col">Unidad de Negocio SBU</th>
<th scope="col">Porcentaje Total Asignado a la SBU</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td><span style="font-family: Tahoma, Verdana, Arial, Sans-Serif; font-size: 14px; font-weight: bold; font-style: normal">Autos</span></td>
<td><input id="formPrincipal:tablaSbu:0:porcentajeSbu" type="text" name="formPrincipal:tablaSbu:0:porcentajeSbu" value="0.0" maxlength="4" onchange="ScriptEncuesta.getNumeroSbus(replyTotal);" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" size="4" /></td>
<td><table title="Autos">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Autos Importados</td>
<td><input type="text" name="formPrincipal:tablaSbu:subTabla:_id16:0:_id22" value="0.0" maxlength="4" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" size="4" title="Autos Importados" /></td>
</tr>
<tr>
<td>Autos Nal</td>
<td><input type="text" name="formPrincipal:tablaSbu:subTabla:_id16:1:_id22" value="0.0" maxlength="4" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" size="4" title="Autos Nal" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><span style="font-family: Tahoma, Verdana, Arial, Sans-Serif; font-size: 14px; font-weight: bold; font-style: normal">ERP</span></td>
<td><input id="formPrincipal:tablaSbu:1:porcentajeSbu" type="text" name="formPrincipal:tablaSbu:1:porcentajeSbu" value="0.0" maxlength="4" onchange="ScriptEncuesta.getNumeroSbus(replyTotal);" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" size="4" /></td>
<td><table title="ERP">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
<td><input type="text" name="formPrincipal:tablaSbu:subTabla:_id16:0:_id22" value="0.0" maxlength="4" onkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" size="4" title="TEST" /></td>
</tr>
</tbody>
</table>

Any ideas would be really appreciated

Kind regards


Francisco