chauncy_win 2022-07-03 05:19 采纳率: 90%
浏览 87
已结题

求解jsp无法弹出模态框问题

问题遇到的现象和发生背景
求解数据库加载出来的数据点击删除或者修改无法弹出模态框.检查过后端没有问题.
jquery,bootstrap
问题相关代码,请勿粘贴截图

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入 Bootstrap -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!-- 引入 font-awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>宿舍管理系统</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10">
            <!-- 顶部搜索部分 -->
            <div class="panel panel-default">
                <div class="panel-heading">搜索</div>
                <div class="panel-body">
                    <form role="form" class="form-inline" action="/dormitoryAdmin?method=search" method="post">
                        <div class="form-group">
                            <label for="name">字段:</label>
                            <select name="key" class="form-control">
                                <option value="XM">姓名</option>
                                <option value="SFZ">身份证</option>
                                <option value="SJHM">手机号码</option>
                            </select>
                        </div>
                        <div class="form-group" style="margin-left: 20px">
                            <label for="value">值:</label>
                            <input type="text" class="form-control" name="value" placeholder="字段值" maxlength="12" style="width: 130px">
                        </div>
                        <div class="form-group " style="margin-left: 20px">
                            <button type="submit" class="btn btn-info ">
                                        <span style="margin-right: 5px"
                                              class="glyphicon glyphicon-search" aria-hidden="true">
                                        </span>开始搜索
                            </button>
                        </div>
                        <div class="form-group " style="margin-left: 48px">
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addUserModal">
                                        <span style="margin-right: 5px" class="" aria-hidden="true">
                                            <i class="fa fa-user-plus">添加学生信息</i>
                                            </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 列表展示-->
            <div class="table-responsive">
                <table class="table table-hover ">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>身份证</th>
                        <th>手机</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${list}" var="dormitoryAdmin">
                        <tr>
                            <td>${dormitoryAdmin.UUID}</td>
                            <td>${dormitoryAdmin.XM}</td>
                            <td>${dormitoryAdmin.SFZ}</td>
                            <td>${dormitoryAdmin.SJHM}</td>
     
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default "
                                            data-UUID="${dormitoryAdmin.UUID}"
                                            data-XM="${dormitoryAdmin.XM}"
                                            data-SFZ="${dormitoryAdmin.SFZ}"
                                            data-SJHM="${dormitoryAdmin.SJHM}"
                                            data-toggle="modal"
                                            data-target="#updateUserModal">
                                        <i class="fa fa-user-o">修改</i>
                                    </button>
                                    <button type="button" class="btn btn-danger "
                                            data-id="${dormitoryAdmin.UUID}"
                                            data-toggle="modal"
                                            onclick="" data-target="#delUserModal">
                                        <i class="fa fa-user-times">删除</i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
              
                <!-- update框示例(Modal) -->
                <form method="post" action="/dormitoryAdmin?method=save" class="form-horizontal" style="margin-top: 0px" role="form"
                      id="form_data" style="margin: 20px;">
                    <div class="modal fade" id="updateUserModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true">x</button>
                                    <h4 class="modal-title" id="myModalLabel">用户信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="user_id" class="col-sm-3 control-label">ID</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly required class="form-control" id="id"
                                                       name="id">
                                                <input type="hidden" name="oldDormitoryId" id="oldDormitoryId"/>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="user_id" class="col-sm-3 control-label">宿舍</label>
                                            <div class="col-sm-9">
                                                <select class="form-control" name="dormitoryId">
                                                    <c:forEach items="${dormitoryList}" var="dormitory">
                                                        <option class="dormitory" value="${dormitory.id}">${dormitory.name}</option>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="user_id" class="col-sm-3 control-label">学号</label>
                                            <div class="col-sm-9">
                                                <input type="text" required class="form-control" id="number"
                                                       name="number" value="" placeholder="请输入学号">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="user_id" class="col-sm-3 control-label">姓名</label>
                                            <div class="col-sm-9">
                                                <input type="text" required class="form-control" id="name"
                                                       name="name" value="" placeholder="请输入姓名">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="user_id" class="col-sm-3 control-label">性别</label>
                                            <div class="col-sm-9">
                                                <input type="radio" checked value="男" class="gender"
                                                       name="gender">&nbsp;&nbsp;&nbsp;<input type="radio" value="女" class="gender"
                                                                         name="gender"></div>
                                        </div>

                                        <div class="form-group">
                                            <label for="user_id" class="col-sm-3 control-label">入住时间</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control" id="createDate">
                                            </div>
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 删除模态框示例(Modal) -->
                <form method="post" action="/student?method=delete"
                      class="form-horizontal" style="margin-top: 0px" role="form"
                      id="form_data" style="margin: 20px;" >
                    <div class="modal fade" id="delUserModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="myModalLabel1">用户信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <div class="col-sm-9">
                                                <h3 class="col-sm-18 control-label" id="deleteLabel">删除信息</h3>
                                                <input type="hidden" class="form-control" id="tab"
                                                       name="tab" placeholder="" value="dor_admin"> <input
                                                    type="hidden" class="form-control" id="id"
                                                    name="id" placeholder="">
                                                <input  type="hidden" name="dormitoryId" id="dormitoryId"/>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-danger" >删除</button>
                                    <span id="tip"> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $('#updateUserModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget)
        var id = button.data('id')
        var dormitoryId = button.data('dormitory-id')
        var number = button.data('number')
        var name = button.data('name')
        var gender = button.data('gender')
        var createDate = button.data('create-date')
        var modal = $(this)
        modal.find('.modal-title').text('修改学生信息')
        modal.find('#id').val(id)
        modal.find('#number').val(number)
        modal.find('#name').val(name)
        modal.find('#createDate').val(createDate)
        modal.find('#oldDormitoryId').val(dormitoryId)
        var list = modal.find('.gender')
        for(var i=0;i<list.length;i++){
            if(gender == $(list.get(i)).val()){
                $(list.get(i)).prop('checked',true)
            }
        }
        var list2 = modal.find('.dormitory')
        for(var i=0;i<list2.length;i++){
            if(dormitoryId == $(list2.get(i)).val()){
                $(list2.get(i)).prop('selected',true)
            }
        }
    })

    $('#delUserModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget)
        var id = button.data('id')

        var modal = $(this)
        modal.find('.modal-title').text('删除学生信息')
        modal.find('#deleteLabel').text('是否删除ID为  ' + id + ' 的信息')
        modal.find('#id').val(id)

    })
</script>

</body>

</html>

运行结果及报错内容
前端不报错
我的解答思路和尝试过的方法
网上查阅资料所有的方法都无法解决,版本我也尝试过更改,都不行

我想要达到的结果
能够正常弹出模态框

  • 写回答

3条回答 默认 最新

  • EdsionWang 2022-07-03 09:13
    关注

    前端问题打开浏览器F12,看看控制台报的什么错误。
    提问有代码的,使用插入代码,否则你的代码嵌入的csdn的页面中了,没法看。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月12日
  • 已采纳回答 7月4日
  • 修改了问题 7月3日
  • 创建了问题 7月3日

悬赏问题

  • ¥15 Arduino,利用modbus的RS485协议,进行对外置的温湿度传感器进行数据读取
  • ¥15 vhdl+MODELSIM
  • ¥20 simulink中怎么使用solve函数?
  • ¥30 dspbuilder中使用signalcompiler时报错Error during compilation: Fitter failed,求解决办法
  • ¥15 gwas 分析-数据质控之过滤稀有突变中出现的问题
  • ¥15 没有注册类 (异常来自 HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  • ¥15 知识蒸馏实战博客问题
  • ¥15 用PLC设计纸袋糊底机送料系统
  • ¥15 simulink仿真中dtc控制永磁同步电机如何控制开关频率
  • ¥15 用C语言输入方程怎么