bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】
背景：记录写hostmanger中用户下拉框关联部门遇到的问题及解决方法
问题：需求是展示页面展示用户所属的部门，点击修改按钮后，弹出对应的model，这个时候部门的select要默认选中用户所在的select
如下图所示：
点击修改弹出model如下：
默认这块显示的是select的第一个option
解决办法：
在点击【修改】按钮的时候，可以首先取到这行数据部门列的id和value，在model弹出后，对model中的select元素做操作，如果select中的option的值等于刚才取到的value，则给这个option添加selected=selected属性
首先想到的是利用bootstrap的事件如shown.bs.modal来实现
但是测试的问题是，这个事件并不是在模态对话框出来后执行，而是在模态对话框之前执行，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css" %}">
</head>
<body>
<!--表格展示-->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">用户详细信息</h3>
</div>
<div class="box-body">
<div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
</div>
</div>
<!-- Table field -->
<div class="row">
<div class="col-sm-12">
<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
<!--thead-->
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="" aria-controls="example1" rowspan="" colspan="" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 50px;">账号ID</th>
<th class="sorting" tabindex="" aria-controls="example1" rowspan="" colspan="" aria-label="Browser: activate to sort column ascending" style="width: 80px;">账号</th>
<th class="sorting" tabindex="" aria-controls="example1" rowspan="" colspan="" aria-label="Engine version: activate to sort column ascending" style="width: 90px;">操作</th>
</tr>
</thead>
<!--tbody-->
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" id="id"></td>
<td id="department_name">robin</td>
<td>
<!--<button type="button" class="btn btn-primary btn-lg" onclick="openModal();"></button>-->
<button id="modify_user" data-toggle="modal" data-target="#modify_user_modal" class="btn btn-info" onclick="openModal();">修改</button>
<button id="delete_user" data-toggle="modal" data-target="#delete_user_modal" class="btn btn-info">删除</button>
</td>
</tr> </tbody>
<!--tfoot-->
</table>
</div>
</div>
</div>
</div>
</div>
</section> <!--修改用户模态对话框-->
<div id="myModal" class="modal">
<div class="modal-dialog" style="margin-top: 200px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">修改账户信息</h4>
</div>
<div class="modal-body">
<form id="modify_user_form" action="/page/userinfo/" role="form" method="post"> <div class="form-group">
<label>登录名</label>
<input type="text" class="form-control" id="modify_user_name" name='modify_user_name' placeholder="如: sys.yourname" readonly autofocus >
</div> <div class="form-group">
<label>备注</label>
<input type="textarea" class="form-control" id="add_user_description" name='add_user_description'
placeholder="请用一句话描述创建的虚拟用户，不要包含特殊字符...">
</div> <div class="modal-footer">
<input type="text" name="request-type" value="modify" class="hide">
<button id="modify_user_cancel_btn" type="submit" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="modify_user_confirm_btn" type="submit" class="btn btn-primary disabled">修改</button>
</div>
</form>
</div>
</div>
</div>
</div> <script src="jquery-3.2.1.js"> </script>
<script src="bootstrap.js"> </script> <script>
function openModal() {
console.log("before open action");
$('#myModal').modal({
backdrop: true,
keyboard: false,
show: true,
remote: "template.html"
});
console.log("after open action");
} $('#myModal').on('shown.bs.modal', function(e) {
var btn =$(e.relatedTarget); // btn表示的是触发这个model的删除按钮
alert('在模态框显示完毕后触发！');
});
</script>
</body>
</html>
点击【修改】
然后
很显然数据显示的顺序是有问题的~~~~~
最后发现原因是 model的class 必须有fade样式
最后发现原因是 model的class 必须有fade样式
最后发现原因是 model的class 必须有fade样式
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css" %}">
</head>
<body>
<!--表格展示-->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">用户详细信息</h3>
</div>
<div class="box-body">
<div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
</div>
</div>
<!-- Table field -->
<div class="row">
<div class="col-sm-12">
<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
<!--thead-->
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="" aria-controls="example1" rowspan="" colspan="" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 50px;">账号ID</th>
<th class="sorting" tabindex="" aria-controls="example1" rowspan="" colspan="" aria-label="Browser: activate to sort column ascending" style="width: 80px;">账号</th>
<th class="sorting" tabindex="" aria-controls="example1" rowspan="" colspan="" aria-label="Engine version: activate to sort column ascending" style="width: 90px;">操作</th>
</tr>
</thead>
<!--tbody-->
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" id="id"></td>
<td id="department_name">robin</td>
<td>
<!--<button type="button" class="btn btn-primary btn-lg" onclick="openModal();"></button>-->
<button id="modify_user" data-toggle="modal" data-target="#modify_user_modal" class="btn btn-info" onclick="openModal();">修改</button>
<button id="delete_user" data-toggle="modal" data-target="#delete_user_modal" class="btn btn-info">删除</button>
</td>
</tr> </tbody>
<!--tfoot-->
</table>
</div>
</div>
</div>
</div>
</div>
</section> <!--修改用户模态对话框-->
<div id="myModal" class="modal fade"> <!--- fade fade fade ->
<div class="modal-dialog" style="margin-top: 200px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">修改账户信息</h4>
</div>
<div class="modal-body">
<form id="modify_user_form" action="/page/userinfo/" role="form" method="post"> <div class="form-group">
<label>登录名</label>
<input type="text" class="form-control" id="modify_user_name" name='modify_user_name' placeholder="如: sys.yourname" readonly autofocus >
</div> <div class="form-group">
<label>备注</label>
<input type="textarea" class="form-control" id="add_user_description" name='add_user_description'
placeholder="请用一句话描述创建的虚拟用户，不要包含特殊字符...">
</div> <div class="modal-footer">
<input type="text" name="request-type" value="modify" class="hide">
<button id="modify_user_cancel_btn" type="submit" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="modify_user_confirm_btn" type="submit" class="btn btn-primary disabled">修改</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 需引用jquery 和 bootstrap.js-->
<script src="jquery-3.2.1.js"> </script>
<script src="bootstrap.js"> </script>
<script>
function openModal() {
console.log("before open action");
$('#myModal').modal({
backdrop: true,
keyboard: false,
show: true,
remote: "template.html"
});
console.log("after open action");
} $('#myModal').on('shown.bs.modal', function(e) {
var btn =$(e.relatedTarget); // btn表示的是触发这个model的删除按钮,通过这个再去操作页面的其他元素
alert('在模态框显示完毕后触发！');
});
</script>
</body>
</html>
效果：
使用 data-target="#modify_user_modal" 这种方式触发模态对话框时， bootstrap按钮上绑定函数的执行顺序
onclick绑定自定义的函数-----> 模态对话框展示------->shown.bs.modal事件
参考文章：
http://v3.bootcss.com/javascript/#modals-events
https://github.com/zhbhun/bootstrap-study-demo/blob/master/modal/event-demo.html
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
https://segmentfault.com/q/1010000005085719
bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】的更多相关文章
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- 监听EF执行的sql语句及状态
1.监听EF执行sql的方式 db.Database.Log += c => Console.WriteLine($"sql:{c}"); SQL Server Profil ...
- 友盟分享到微信 监听不执行 监听只执行onStart,(onResult,onError,onCancel 不执行)
最近在做一个项目 有一个需求是要分享项目中的一个商品 这对于我来说简直是 so easy (项目是三个人一起写的) 正好看到之前有同事写完了 我就拿过来用吧 一顿复制粘贴 大功告成 这个是监 ...
- quartz2.3.0（九）job任务监听器，监听任务执行前、后、取消手动处理方法
job1任务类 package org.quartz.examples.example9; import java.util.Date; import org.quartz.Job; import o ...
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- 为不具有change事件的html标签设置监听事件
change事件会在文本内容或选项被更改时触发. 该事件仅适用于<input type="text">和<textarea>以及<select> ...
- ThinkPHP 数据库操作(六) : 查询事件、事务操作、监听SQL
查询事件 查询事件(V5.0.4+) 从 5.0.4+ 版本开始,增加了数据库的CURD操作事件支持,包括: 查询事件仅支持 find . select . insert . update 和 del ...
- 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
随机推荐
- webpack4 + vue多页面项目精细构建思路
#构建思路 虽然当前前端项目多以单页面为主,但多页面也并非一无是处,在一些情况下也是有用武之地的,比如: 项目庞大,各个业务模块需要解耦 SEO更容易优化 没有复杂的状态管理问题 可以实现页面单独上线 ...
- Tomcat：使用startup.bat启动tomcat遇到报错
问题:使用startup.bat启动tomcat的时候报错,按照网页上的办法都试了一遍,但是没有解决问题.命令窗口启动tomcat会一闪而过,然后退出. 解决:1 检查环境变量配置是否有问题: CAT ...
- 01_2_Namespace命名空间
01_2_Namespace命名空间 1. Namespace_命名空间 namespace决定了action的访问路径,默认为””,可以接收所有路径的action namespace可以写为/,或者 ...
- 监测UITextField的变化
监测UITextField的变化可以为UIControlEventEditingChanged事件添加target. 我们有时候会需要用到这个需求:输入框输入文本超过xx长度,不再允许输入其他内容! ...
- poj3525 Most Distant Point from the Sea
题目描述: vjudge POJ 题解: 二分答案+半平面交. 半径范围在0到5000之间二分,每次取$mid$然后平移所有直线,判断半平面交面积是否为零. 我的eps值取的是$10^{-12}$,3 ...
- wamp开发环境配置之配置Apache虚拟主机
网站建设人员在本地测试时,常常不是一个网站,那怎么能像输入域名一样在地址栏上面输入“域名”就能本地访问该网站呢?这里就要配置Apache虚拟主机了! 1.找到apache\conf\httpd.con ...
- k短路模板
https://acm.taifua.com/archives/jsk31445.html 链接: https://nanti.jisuanke.com/t/31445 #include <io ...
- 迷宫问题&MakeFile
先看一个有意思的问题, 我们定义一个二维数组表示迷宫. 它表示一个迷宫, 其中的1表示墙壁,0表示可以走的路, 只能横着走或竖着走,不能斜着走, 我们要编程序找出从左上角到右下角的路线.其实这个问题可 ...
- Python3下基于bs4和sqlalchemy的爬虫实现
本文来自网易云社区 作者:王贝 小学生现在都在学python了,作为专业程序员当然不能落下了,所以,快马加鞭,周六周末在家学起了python3,python3的基本语法比较简单,相比于Java开发更加 ...
- xml编辑无提示？这么破！
在学习testng这个单元测试框架时,如果咱们碰到了编辑测试套件xml,不提示的情况(有提示方便咱们学习,并且testng的测试套件定义必须按照他的dtd文件约束来),咱们可以按照下面的步骤去解决这个 ...