详解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 prev ~ siblings选择器使用介绍
Aug 09 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
安装dbus-python的简要教程
2015/05/05 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python 制作磁力搜索工具
2021/03/04 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
大学毕业生个人总结
2015/02/28 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers