如何使JSTL编写的元素id可用于脚本

How to make id of elements written by JSTL available for scripting?

本文关键字：id 用于 脚本 元素 何使 JSTL      更新时间：2023-09-26

我正在开发一个使用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>

这是你的错误:

<c:forEach ...>
    <a id="firstName" ...>  
    <a id="lastName" ...>  
    <a id="dob" ...>  
    <a id="email" ...>  
</c:forEach>
具有相同id的多个元素在HTML中是非法的。在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>
相关文章：