Bootstrap JS没有为多个deleteButtons工作JSP

时间:2016-11-27 07:14:47

标签: javascript twitter-bootstrap jsp bootstrap-modal

有时只有Jquery 2.2才有效。如果我评论它删除确认按钮不会弹出。 3.1.1此代码似乎没有工作。

w3schools和getBootstrap代码已经提到了这个

删除确认模式仅弹出表中的第一个条目,即foreach循环。

不知道为什么......

请帮助..

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <!--<script src="js/manageBooks.js"></script>-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#deleteButton").click(function () {
                    $("#deleteModal").modal();
                });
            });
        </script>
        <title>Manage Books</title>
    </head>
    <body>  
        <p style="color:white; font-weight:bold; text-align:right;">pmahend1</p>
            <h4>Add book from Google Books</h4>
            <form action="manageBooks" method="POST">
                <input type="hidden" name="action" value="searchGoogleBook" />
                <input type="search" placeholder="Enter Title or Author" name="query" style="width: 450px"/>
                <input type="submit" name="Search" value="Search"/>
                <p style="color:red;"></p>
            </form>
            <div id="results"></div>
            <br>
            <div><a class="btn btn-default btn-info" href="manageBooks?action=addBookPage">Add Books Manually</a></div>
            <br>
            <h4 class="container">Book Details </h4>
            <br>
            <div class="container">
                <table class="form-group" border="1">
                    <tr>
                        <th>Title</th>
                        <th>Author</th>
                        <th>Edition</th>
                        <th>Genre</th>
                        <th>ISBN10</th>
                        <th>ISBN13</th>
                        <th>Update</th>
                        <th>Delete</th>
                    </tr>

                    <tr>
                        <td>Adultery</td>
                        <td>Paulo Coelho</td>
                        <td></td>
                        <td>Fiction</td>
                        <td>1101874090</td>
                        <td>9781101874097</td>
                        <td><a href="manageBooks?action=editBookPage&bookId=6" role="button" class="btn btn-link">Edit</a></td>
                        <!--<td><a href="manageBooks?action=deleteBookPage&bookId=6">Delete</a></td>-->
                        <td>
                            <!--<div class="container">-->
                            <button type="button" class="btn btn-default" id="deleteButton">Delete</button>
                            <div class="modal fade" id="deleteModal" role="dialog">
                                <div class="modal-body" style="padding:40px 50px;">
                                    <form role="form" action="manageBooks" method="POST">

                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title">Delete Parmanently</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>Are you sure about this ?</p>
                                            </div>

                                            <div class="modal-footer">
                                                <input type="hidden" name="action" value="deleteBook">
                                                <input type="hidden" name="bookId" value="6" />
                                                <button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-danger" id="confirm">Delete</button>
                                            </div>
                                    </form>
                                </div>
                            </div>
                            </div>
                            <!--</div>-->

                        </td>
                    </tr>

                    <tr>
                        <td>Twilight&#039;s Wrath</td>
                        <td>SnÃÂÃÂÃÂæbjÃÂÃÂÃÂörn</td>
                        <td></td>
                        <td>Fiction</td>
                        <td>1490735372</td>
                        <td>9781490735375</td>
                        <td><a href="manageBooks?action=editBookPage&bookId=7" role="button" class="btn btn-link">Edit</a></td>
                        <!--<td><a href="manageBooks?action=deleteBookPage&bookId=7">Delete</a></td>-->
                        <td>
                            <!--<div class="container">-->
                            <button type="button" class="btn btn-default" id="deleteButton">Delete</button>
                            <div class="modal fade" id="deleteModal" role="dialog">
                                <div class="modal-body" style="padding:40px 50px;">
                                    <form role="form" action="manageBooks" method="POST">

                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title">Delete Parmanently</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>Are you sure about this ?</p>
                                            </div>

                                            <div class="modal-footer">
                                                <input type="hidden" name="action" value="deleteBook">
                                                <input type="hidden" name="bookId" value="7" />
                                                <button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-danger" id="confirm">Delete</button>
                                            </div>
                                    </form>
                                </div>
                            </div>
                            </div>
                            <!--</div>-->

                        </td>
                    </tr>

            </table>       
        </div>
        <br>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

它自动修复。可能是我不得不重启TomCat服务器。