详解bootstrap的modal-remote两种加载方式【强化】


Posted in Javascript onJanuary 27, 2017

方法一:

使用链接

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a>

当点击该连接时,demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中。当然这里的连接也可以是controller

方法二:

使用脚本

$("#myModal").modal({  
  remote: "page.jsp"  
});

但是这样加载后,会有问题,modal数据只加载一次,如果要加载不同的数据,例如根据id查询详细信息,modal的数据是不能更新的,即使传的id值不同。其实解决办法很简单,只需要在加载下次数据前,将之前的加载的数据清除即可。

最简单的方式就是监听modal的hidden,当modal关闭时,即把数据清除即可:

//v2 
$("#myModal").on("hidden", function() {  
  $(this).removeData("modal");  
});  
//v3 
$("#myModal").on("hidden.bs.modal", function() {  
  $(this).removeData("bs.modal"); 
});

问题来了:如果在请求的页面中有$()加载事件加载比如boostrap-validator或者boostrap-fileinput等插件会出现奇怪的现象,第一次正常执行,关掉modal,第二次,$()的代码没有执行,第三次能执行;经过反复发现“hidden.bs.modal”监听每次都执行了,但是加载到<div class="modal-content"></div>里面的数据没有被清除,可能是这个原因导致的这种现象,于是改成如下代码:

$("#myModal").on("hidden.bs.modal", function() {  
  $(this).removeData("bs.modal"); 
  /*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据,手动移除加载的内容*/ 
  $(this).find(".modal-content").children().remove();  
});

如此这样问题解决了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue路由插件之vue-route
Jun 13 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 #Javascript
js监听input输入框值的实时变化实例
Jan 26 #Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 #Javascript
Jquery实时监听input value的实例
Jan 26 #Javascript
jquery实时获取时间的简单实例
Jan 26 #Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 #Javascript
You might like
PHP开发入门教程之面向对象
2006/12/05 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python pandas库的安装和创建
2019/01/10 Python
python反编译学习之字节码详解
2019/05/19 Python
Python操作qml对象过程详解
2019/09/26 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
劳动模范事迹材料
2014/01/19 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
校长创先争优承诺书
2014/08/30 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
python基础之模块的导入
2021/10/24 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server