详解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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
浅谈js的异步执行
Oct 18 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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
DSP接收机前端设想
2021/03/02 无线电
桌面中心(三)修改数据库
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
yii数据库的查询方法
2015/12/28 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js获取class的所有元素
2013/03/28 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python tkinter控件布局项目实例
2019/11/04 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
师范毕业生自我鉴定
2014/01/15 职场文书
高中生活自我鉴定
2014/01/18 职场文书
公司端午节活动方案
2014/02/04 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
连锁超市项目计划书
2014/09/15 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
玄武湖导游词
2015/02/05 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript