JSP部分我的html代码没有显示在浏览器上

时间:2017-09-08 21:36:41

标签: javascript html jsp spring-mvc

我的Jsp:

下面是我的JSP,我正在尝试获取客户列表并使用foreach标记()并在循环中(foreach标记)我在每行的下拉按钮中都有Action列表,以便能够编辑和删除。问题是我的代码没有显示我的浏览器中有下拉列表的Action按钮。

当我在下面添加模态标记时,会出现此问题。如果模态标签被删除,那么它的工作原理。但我希望能够通过模态对话框添加客户。怎么可能呢?有人可以帮忙吗感谢。

发布Bigin                                                             

  • 编辑客户明细
  • 发出结束

    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
        <%@page contentType="text/html" pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
        <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset="utf-8"">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
            href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
        <script type="text/javascript" src="resources/jquery/jquery-3.2.1.js"></script>
    
        <script
            src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    
    
        <title></title>
    
    
        <link rel="stylesheet" href="<c:url value="/resources/css/style.css"/>">
    
        <script type="text/javascript"
            src="<c:url value="/resources/script/script.js"/>"></script>
    
    
    
    
        </head>
        <body>
    
            <div class="navbar-inner">
    
                <img src="<c:url value="/resources/img/StNavBar.PNG"/>" />
    
            </div>
    
    
    
            <div class="content">
    
    
                <div class="headers">
                    <div class="bottom1nav" id="myBottomnav">
                        <h4></h4>
    
                    </div>
    
                    <div class="utilityHeader" id="myUtilityHeader">
                        <h1>Utility Certificate Management</h1>
                        <div class="utilitySubHeader" id="mySubUtility">
                            <h2></h2>
    
                            <a href="#" class="createCustomer" data-toggle="modal"
                                data-target="#createCustomerModal">Create New Customer</a>
    
                            <section class="container">
                            <div class="panel panel-default">
                                <div class="panel-heading"></div>
                                <div class="panel-body">
                                    <table class="table table-condensed table-hover outer-table table-sort">
                                        <thead >
                                            <tr>
                                                <th>No.</th>
                                                <th>Customer Name</th>
                                                <th>Contact Name</th>
                                                <th>Street</th>
                                                <th>State</th>
                                                <th>Zip-Code</th>
                                                <th>Country</th>
                                                <th>Email</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
    
                                            <c:forEach var="customer" items="${customers}">
                                                <tr>
                                                    <td><c:out value="${status.count}" /></td>
                                                    <td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
                                                    <td>${customer.contactName}</td>
                                                    <td>${customer.customerName}</td>
                                                    <td>${customer.address.street}</td>
                                                    <td>${customer.address.state}</td>
                                                    <td>${customer.address.zipCode}</td>
                                                    <td>${customer.address.country}</td>
                                                    <td>${customer.email}</td>
    
    
    
                                                    <!--below line of code till end of tag </td> not showing on browser  -->
    
    
    
                                                    <td>
                                                        <div class="btn-group">
                                                            <button type="button"
                                                                class="btn btn-default dropdown-toggle"
                                                                data-toggle="dropdown">
                                                                Actions <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li><a data-toggle="modal"
                                data-target="#editCustomerModal">Edit Customer Detail</a></li>
                                                                <li><a onclick="alert('To be implemented.');">Delete Customer</a></li>
                                                            </ul>
                                                        </div>
                                                    </td>
    
                                                </tr>
                                                                                    </c:forEach>
                                        <tbody>
                                    </table>
                                </div>
                            </div>
                            </section>
    
    
    
    
    
    
    
    
    
    
                        </div>
                    </div>
                </div>
    
    
            </div>
    
    
            <!-- All modal dialog goes below this line -->
    
    
        <!--create customer modal  -->
    
            <div id="createCustomerModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            Create New Customer
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
    
    
    
                            <table class="form-table">
                                <tbody>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="pool-name">Customer Name:</label></td>
                                        <td><input type="text" id="name" title="Company Name" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Contact Name:</label></td>
                                        <td><input type="text" id="actName" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="description">Street:</label></td>
                                        <td><input type="text" id="street" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Zip-Code:</label></td>
                                        <td><input type="text" id="zip" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Country:</label></td>
                                        <td><input type="text" id="country" path="#"
                                            class="form-control" /></td>
                                    </tr>
    
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Email:</label></td>
                                        <td><input type="text" id="email" path="#"
                                            class="form-control" /></td>
                                    </tr>
    
                                </tbody>
                            </table>
    
    
                        </div>
                        <div class="modal-footer">
                            <div>
                                <input type="submit" id="createNewCustomer" value="Create"
                                    class="btn btn-default" onClick="alert('To be Implemented');" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
    
    
    
    
            <!--Edit Customer Modal  --> 
    
            <div id="editCustomerModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            Create New Customer
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
    
    
    
                            <table class="form-table">
                                <tbody>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="pool-name">Customer Name:</label></td>
                                        <td><input type="text" id="name" title="Company Name" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Contact Name:</label></td>
                                        <td><input type="text" id="contact" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="description">Street:</label></td>
                                        <td><input type="text" id="street" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Zip-Code:</label></td>
                                        <td><input type="text" id="zip" path="#"
                                            class="form-control" /></td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Country:</label></td>
                                        <td><input type="text" id="country" path="#"
                                            class="form-control" /></td>
                                    </tr>
    
                                    <tr valign="top">
                                        <td style="width: 25% !important;"><label
                                            class="not-required" for="expire-after">Email:</label></td>
                                        <td><input type="text" id="email" path="#"
                                            class="form-control" /></td>
                                    </tr>
    
                                </tbody>
                            </table>
    
    
                        </div>
                        <div class="modal-footer">
                            <div>
                                <input type="submit" id="createNewCustomer" value="Save"
                                    class="btn btn-default" onClick="alert('To be Implemented');" />
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
    
        </body>
        </html>
    

    1 个答案:

    答案 0 :(得分:0)

    我已通过以下更改测试您的代码,工作正常。

      <c:forEach var="customer" begin="1" end="5">
                                            <tr>
                                                <td><c:out value="${status.count}" /></td>
                                                <td><a title="Go to the Company Certificate Detail">1</a></td>
                                                <td>2</td>
                                                <td>3</td>
                                                <td>4</td>
                                                <td>5</td>
                                                <td>6</td>
                                                <td>7</td>
                                                <td>8</td>
    
    
    
                                                <!--below line of code till end of tag </td> not showing on browser  -->
    
    
    
                                                <td>
                                                    <div class="btn-group">
                                                        <button type="button"
                                                            class="btn btn-default dropdown-toggle"
                                                            data-toggle="dropdown">
                                                            Actions <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" role="menu">
                                                            <li><a data-toggle="modal"
                            data-target="#editCustomerModal">Edit Customer Detail</a></li>
                                                            <li><a onclick="alert('To be implemented.');">Delete Customer</a></li>
                                                        </ul>
                                                    </div>
                                                </td>
    
                                            </tr>
                                                                                </c:forEach>
    

    请检查浏览器控制台是否有任何错误?