1

我正在使用 Twitter-Bootstrap 可编辑和 Java Servlet 后端开发一个 Web 应用程序。使用 JSTL 渲染表格数据，并且连接可编辑的数据表单不起作用。JS 开发者控制台，显示未定义，因此它无法识别在 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>
4

1 回答 1

1

这是你的错误：

<c:forEach ...>
    <a id="firstName" ...>  
    <a id="lastName" ...>  
    <a id="dob" ...>  
    <a id="email" ...>  
</c:forEach>

多个相同的元素在 HTML 中id是非法的。HTML DOM 和 JS 中的行为未指定。

根据例如迭代索引或迭代项的 ID 给他们一个唯一的 ID，或者更好的是，如果他们需要在 中表现相同editable()，只需相同的类名：

<c:forEach ...>
    <a class="editable" ...>  
    <a class="editable" ...>  
    <a class="editable" ...>  
    <a class="editable" ...>  
</c:forEach>

这样你就可以保持你的 JS DRY：

<script> 
    $('.editable').editable({
    });
</script>
于 2013-04-23T13:55:14.650 回答