基于相同模板的不同代码段;t产生相同的结果
Differents pieces of code based on same template don't produce the same result
在我项目的一个页面中,我有一个iten列表,其中对于列表中的每个项目,都有以下代码:
<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çã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çã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á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çã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>
我的问题是,只有列表的第一项具有表单中每个元素的预期行为。其他iten既没有打开日期/时间选择器,也没有捕获提交操作的输出并将其正确显示。
有人能看出我做错了什么吗?
ps.:此页面的完整代码如下:
https://github.com/klebermo/webapp_horario_livre/blob/master/WebContent/WEB-INF/jsp/evento/lista.jsp
如果这段代码被写了多次,您将得到多个具有相同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'],
});
你的时间挑剔者也是如此。。。
在第38行链接到的代码中,您正在使用<c:forEach var="item" items="${lista}">
迭代多个项目。在foreach中,您将创建许多具有id
属性的标记,这些属性最终具有相同的值。HTML中的id
属性在页面上必须是唯一的。
如果您想在几个输入字段上使用jQueryUI的日期选择器,那么让这些字段具有class
属性,并将其用作选择器,而不是您现在使用的id选择器。
例如更改:
<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'],
});
相关文章:
- webpack代码拆分了handlerbs文件——结果是文件很大
- 如何将解析云代码的query.count结果保存在变量中
- 每次运行此代码时,我都会得到不同的结果,这是怎么回事
- 原型中漂亮的代码,如何省略'不是函数'空结果选择器上的错误
- 为什么这个js代码的RSA加密结果与java的RSA标准代码不同
- 显示基于javascript函数结果的HTML代码
- 当我运行代码时,我得到以下结果 []对象对象] [对象对象],但应该给我一个有序数组
- php/mysql搜索结果-当类型>1,同时保持其他类型不>1-代码点火器
- 返回解析云代码关系查询的结果
- 1行代码(console.log),代码中的两个位置=两个结果差异
- 为什么这个JavaScript代码的结果是“;未定义”;
- 如何在ruby on rails中保存和发布Webgl中的JS代码结果
- 对chrome和Firefox使用相同的代码,但得到不同的结果
- 无法在iPhone应用程序上使用PhoneGap和javascript获取JSON结果,但使用相同的代码在Android
- 我怎样才能异步执行 JavaScript 代码片段并等待它们的结果
- Javascript与C++,相同的代码,不同的结果,这是为什么
- 为什么代码似乎有效,但结果中也包含未定义
- 为什么 JSFiddle 不输出此代码的结果
- 如果我有两个选项的代码,单选按钮的结果将无法正常工作
- 如何避免数据结果中的 html 代码