详解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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 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中与数组相关的函数
2007/03/22 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
php 启动报错如何解决
2014/01/17 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
COSETTE官网:奢华,每天
2020/03/22 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
公司管理建议书范文
2014/03/12 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
教师节获奖感言
2015/07/31 职场文书
学校隐患排查制度
2015/08/05 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL