基於相同模板的不同部分代碼不會產生相同的結果

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'], 
    });