基于相同模板的不同部分代码不会产生相同的结果

Question

在我的项目的其中一页中，我有一个itens列表，其中列表中的每个项目都有这段代码：

<div id="edit_evento_${item.id}_2" class="row"> 
     <form method="post" action="<c:out value="${pageContext.request.contextPath}/evento/altera_evento"/>" id="target"> 
     <input type="hidden" name="id" value="${item.id}"> 
     <div class="col-md-3"> 
      Edi&ccedil;&atilde;o de evento 
     </div> 
     <div class="col-md-6"> 
      <table id="hor-minimalist-a"> 
       <thead> 
        <tr> 
         <th>Atributo</th> 
         <th>Valor</th> 
        </tr> 
       </thead> 

       <tbody> 
        <tr> 
         <td> Nome: </td> 
         <td><input type="text" name="nome" value="${item.nome}" size=20 maxlength=40> </td> 
        </tr> 

        <tr> 
         <td> Descri&ccedil;&atilde;o: </td> 
         <td><input type="text" name="descricao" value="${item.descricao}" size=30 maxlength=100> </tdv> 
        </td> 

        <tr> 
         <td> <h3>Periodo da Data</h3> </td> 
         <td> 
          <table> 
           <tr> 
            <td>inicio: <input type="text" id="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td> 
            <td>final: <input type="text" id="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 

        <tr> 
         <td> <h3>Periodo do Hor&aacute;rio</h3> </td> 
         <td> 
          <table> 
           <tr> 
            <td>inicio: <input type="text" id="hora_inicial" name="hora_inicial" value="${item.horaInicial}"/> </td> 
            <td> final: <input type="text" id="hora_final" name="hora_final" value="${item.horaFinal}"/> </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 

        <tr> 
         <td> Dura&ccedil;&atilde;o: </td> 
         <td><input type="text" name="duracao" value="${item.duracao}" size=20 maxlength=2> Minutos </td> 
        </tr> 

        <tr> 
         <td> </td> 
         <td> <div id="result"></div> </td> 
        </tr> 
       </tbody> 

       <tfoot> 
        <tr> 
         <td></td> 
         <td></td> 
        </tr> 
       </tfoot> 
      </table> 
     </div> 
     <div class="col-md-3"> 
      <button type="submit" class="btn btn-lg btn-primary">Salvar</button> <br/> 
     </div> 
     </form> 
    </div> 

与此相关的代码，我有这样的jQuery代码，这是为列表中的每个项目执行：

<script type="text/javascript"> 
    $(function(){ 
     $('#data_inicial').datepicker({ 
      inline: true, 
      showOtherMonths: true, 
      dateFormat: 'dd/mm/yy', 
      dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 

     }); 
     $('#data_final').datepicker({ 
      inline: true, 
      showOtherMonths: true, 
      dateFormat: 'dd/mm/yy', 
      dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 
     }); 
     $('#hora_inicial').timepicker(); 
     $('#hora_final').timepicker(); 
    }); 
</script> 

我的问题是，只有列表中的第一项有预期的行为表单的每个元素。其他itens既不打开日期/时间选择器也不捕获提交操作的输出并将其显示在适当的位置。

任何人都可以看到我做错了什么？

PS：此页面的完整代码是这样的：

https://github.com/klebermo/webapp_horario_livre/blob/master/WebContent/WEB-INF/jsp/evento/lista.jsp

Answer 1

如果这段代码被多次写出来，你最终会与多个项目，所有具有相同的ID“ data_inicial'或'data_final'。除了会产生无效HTML的事实之外，它还会导致jQuery只运行一次，因为jQuery将查找具有该ID的单个唯一项目。

你应该一类具有相同的名称

<td>inicio: <input type="text" class="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td> 
<td>final: <input type="text" class="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td> 

用点更换ID和改变你的jQuery代码的哈希值：

$('.data_inicial').datepicker({ 
     inline: true, 
     showOtherMonths: true, 
     dateFormat: 'dd/mm/yy', 
     dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 

    }); 
    $('.data_final').datepicker({ 
     inline: true, 
     showOtherMonths: true, 
     dateFormat: 'dd/mm/yy', 
     dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 
    }); 

这同样适用于你的时间选择器.. 。

Answer 2

在您链接到第38行的代码中，您正在使用<c:forEach var="item" items="${lista}">来迭代多个项目。在那个foreach里面，你创建了一些标签，这些标签有id属性，最终得到相同的值。 HTML中的id属性在页面上必须是唯一的。

如果你想在几个输入字段上使用jQuery UI的datepicker，那么让这些字段有一个class属性，并使用它作为选择器而不是你现在使用的id选择器。

E.g.改变：

<tr> 
    <td>inicio: <input type="text" id="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td> 
    <td>final: <input type="text" id="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td> 
</tr> 

到

<tr> 
    <td>inicio: <input type="text" class="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td> 
    <td>final: <input type="text" class="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td> 
</tr> 

，并改变你的脚本标签使用的选择：

$('.data_inicial').datepicker({ 
     inline: true, 
     showOtherMonths: true, 
     dateFormat: 'dd/mm/yy', 
     dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 

    }); 
$('.data_final').datepicker({ 
     inline: true, 
     showOtherMonths: true, 
     dateFormat: 'dd/mm/yy', 
     dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], 
    });