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>

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

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

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的单个唯一项。

您应该将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>

并使用点更改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'],
    });

基于相同模板的不同代码片段不会产生相同的结果

2 个答案: