Twitter-Bootstrap editable と Java Servlet Backend を使用して Web アプリを開発しています。JSTL を使用してテーブル データをレンダリングし、編集可能なデータ フォームを接続しても機能しません。JS 開発者コンソールに undefined と表示されるため、JSTL の foreach 内で生成された要素 ID が認識されません。ドキュメントの準備ができたときに編集可能な JS 呼び出しをラップしようとしましたが、機能しません。問題は、JSTL によって記述された要素の ID をスクリプトで使用できるようにする方法だと思います。
<%--
Document : index
Created on : 20/Abr/2013, 23:52:35
Author : Arthur
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap DatePicker CSS-->
<link href="css/datepicker.css" rel="stylesheet" media="screen">
<!-- Bootstrap Editable CSS-->
<link href="css/bootstrap-editable.css" rel="stylesheet" media="screen">
<!-- JQUERY -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Bootstrap JS-->
<script src="js/bootstrap-2.0.2.js"></script>
<!-- Bootstrap DatePicker JS-->
<script src="js/bootstrap-datepicker.js"></script>
<!-- Bootstrap EdiTable JS-->
<script src="js/bootstrap-editable.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.dropdown-toggle').dropdown();
});//]]>
</script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
background-color: #f5f5f5;
}
</style>
<title>.:StaffGest:.</title>
</head>
<body>
<!-- <div class="navbar navbar-inverse navbar-fixed-top">-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">.:StaffGest:.</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="index.jsp">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Funcionários<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Novo</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Apagar</a></li>
<li class="divider"></li>
<li class="nav-header">Pesquisar</li>
<li><a href="#">Pesquisar Funcionário</a></li>
<li><a href="#">Listar Todos</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="container">
<h1>Lista Funcionários:</h1>
<table class="table">
<thead>
<tr>
<th>Nome</th>
<th>Apelido</th>
<th>Data Nascimento</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="employee">
<tr>
<td><a href="#" id="firstName" name="firstName"data-type="text" data-pk="${employee.id}" data-url="employee.do" data-original-title="Nome">${employee.firstName}</a></td>
<td><a href="#" id="lastName" name="lastName" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.lastName}</td>
<td><a href="#" id="dob" name="dob" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"><fmt:formatDate value="${employee.dob}" pattern="MM/dd/yyyy"/></td>
<td><a href="#" id="email" name="email" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.email}</td> </tr>
</c:forEach>
</tbody>
</table>
</div> <!-- /container -->
<script>
$('#firstName').editable({
});
$('#lastName').editable({
});
$('#dob').editable({
});
$('#email').editable({
});
</script>
</body>
</html>