详解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 相关文章推荐
jQuery最佳实践完整篇
Aug 20 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
ES5新增数组的实现方法
May 12 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
深入浅析JS中的严格模式
2018/06/04 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
浅析Python中的多重继承
2015/04/28 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
实习教师自我鉴定
2013/09/27 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
春秋淹城导游词
2015/02/11 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
关于幸福的感言
2015/08/03 职场文书
关于做家务的心得体会
2016/01/23 职场文书