详解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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
小程序双头slider选择器的实现示例
Mar 31 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
javascript判断office版本示例
2014/04/11 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
python多进程共享变量
2016/04/06 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Django密码系统实现过程详解
2019/07/19 Python
python中如何进行连乘计算
2020/05/28 Python
python创建文本文件的简单方法
2020/08/30 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
十八大闭幕感言
2014/01/22 职场文书
初二物理教学反思
2014/01/29 职场文书
《画家乡》教学反思
2014/04/22 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
计算机网络专业求职信
2014/06/05 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
小学教师自我评价
2015/03/04 职场文书
mysql知识点整理
2021/04/05 MySQL
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏