项目问题如下图,
点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(delTag的值),来确定是否删除成功,delTag为true,删除成功,此时应执行语句 $('#deleteMessModal').modal('hide'); 把模态框关掉,但是调试时怎么页关闭不掉,F12进入调试模式,转到console里面一看,报错了: Uncaught TypeError: $(...).modal is not a function, 看到网上有人说可能时jquer.js 和 bootstrap.js引入的顺序有关,到head标签中一看,果然,bootstrap.js 确实在jquery.js的前面引入的,于是调换位置再试,结果没有再报错了,回到页面调试,弹出的模态框也能正常关掉了!
<!--留言管理 模块-->
<script type="text/javascript">
//留言分页显示
var currentPage;//当前页码
var prePage;//上一页
var nextPage;//下一页
var totalPageCount;//总页码
var selectedPage;//下拉列表选中值
var messsDelId; //要删除的留言编号值
var $row;
$(document).ready(function(){
//初次进入显示列表
$("#messDiv").click(function(){
loadMess(1);
});
//下拉列表选择事件
$("#selMessPage").bind("change",function(){
selectedPage=$("#selMessPage").val();
loadMess(selectedPage);//加载选中页
}); //end of $("#selMessPage").bind
//向前翻页
$("#prePageMess").click(function(){
loadMess(prePage);
});
//向后翻页
$("#nextPageMess").click(function(){
if(nextPage>totalPageCount){
nextPage=totalPageCount;
}
loadMess(nextPage);
}); //删除留言
$("#deleteMessConfirm").click(function(){
//alert("当前按钮对应的评论编号:"+messsDelId);
$.ajax({
"url":"http://localhost:8080/tiantmusic/MessageList.do",
"type":"post",
"async":"true",
"dataType":"JSON",
"data":{"messsDelId":messsDelId,"c":"messDel"},
"success":delSuccess,
"error":function(){alert("删除失败");}
}); }); function delSuccess(delTag){
if(delTag==true){
//alert("删除成功");
loadMess(1);//刷新页面显示
$('#deleteMessModal').modal('hide');
/*js/bootstrap.min.js的引入必须放在jquery.js的后面,modal(hide)才能正常使用 */
}
} }); //end of $(document).ready(function()) function loadMess(currentPage){
$.ajax({
"url":"http://localhost:8080/tiantmusic/MessageList.do",
"type":"post",
"async":"true",
"data":{"currentPage":currentPage,"c":"messPage"},
"success":showMess,
"dataType":"json",
"error":function(){alert("加载留言信息失败!");}
});//end of $.ajax }//end of loadMess() function showMess(data){ $("#messTable").html("");//清空显示区域
currentPage=data.currentPage;//获取当前页,前后页,总页数
prePage = data.prePage;
nextPage = data.nextPage;
totalPageCount=data.totalPageCount;
$("#totalPageCount").text("共"+totalPageCount+"页");//写入总页数
$("#selMessPage").html("");
for(var i=1;i<=totalPageCount;i++){ //设置下拉列表选项
var $option=$("<option value='"+i+"'>"+i+"</option>");
$("#selMessPage").append($option);
}
$("#selMessPage").find("option[value='"+currentPage+"']").attr("selected","selected"); //设置默认选中
$.each(data.list,function(i,item){
//console.log(item.messId,item.userName,item.submitTime,item.messContent);
$row = $("<div class='row' id='messRowId' value='"+(i+1)+"'>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2' id='messDelId' text='"+item.messId+"' >"+item.messId+"</div>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>"+item.userName+"</div>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>"+item.submitTime+"</div>"+
"<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4'>"+item.messContent+"</div>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2' >"+
"<button class='btn btn-success btn-xs' data-toggle='modal' data-target='#changeSource'>修改</button> "+
"<button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#deleteMessModal' id='delMessBtn"+(i+1)+"' value='"+(i+1)+"' text='"+item.messId+"'>删除</button>"+
"</div>"+
"</div>");
$("#messTable").append($row);
$("#delMessBtn"+(i+1)+"").click(function(){//删除按钮事件绑定--获取当前按钮对应的评论编号值
messsDelId=item.messId;
}); });//end of $.each() }//end of showMess </script>
<div role="tabpanel" class="tab-pane" id="stud">
<div class="check-div form-inline">
<div class="col-xs-5">
<input type="text" class=" form-control input-sm" placeholder="输入文字搜索" style=" !height: 40px!important;">
<button class="btn btn-white btn-xs ">查 询 </button>
</div> </div>
<div class="data-div">
<div class="row tableHeader">
<div class="col-xs-2 ">
编号
</div>
<div class="col-xs-2 ">
用户名
</div>
<div class="col-xs-2">
时间
</div>
<div class="col-xs-4">
内容
</div>
<div class="col-xs-2">
操作
</div> </div>
<!-- 评论信息显示区域 #messTable -->
<div class="tablebody" id="messTable">
</div> </div>
<!--留言管理区页码块-->
<footer class="footer">
<ul class="pagination">
<li>
<select id="selMessPage">
<!-- 下拉列表选项值设置区域 -->
</select>
页
</li>
<!-- 总页数设置区域 -->
<li class="gray" id="totalPageCount"> </li>
<li>
<i class="glyphicon glyphicon-menu-left" id="prePageMess" >
</i>
</li>
<li>
<i class="glyphicon glyphicon-menu-right" id = "nextPageMess" >
</i>
</li>
</ul>
</footer> <!--删除留言模块-->
<div class="modal fade" id="deleteMessModal" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
确定要删除该条留言?删除后不可恢复!
</div>
<span id="delMessSuccess_span"></span>
</div> <div class="modal-footer">
<!-- <input type="hidden" id="messDelId1" text="$('#messDelId').attr('text')"> -->
<button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
<button type="button" class="btn btn-xs btn-danger" id="deleteMessConfirm">确 定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
参考链接:http://blog.csdn.net/u011039332/article/details/49615025
下边是参考连接中的一些内容: