Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法


Posted in Javascript onJuly 09, 2017

摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题。

1. Bootstrap 模态对话框和简单使用

<div id="myModal" class="modal hide fade">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">x</button>
  <h3>对话框标题</h3>
 </div>
 <div class="modal-body">
  <p>对话框主体</p>
 </div>
 <div class="modal-footer">
  <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a>
  <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">确定</a>
 </div>
</div>

显示效果与下图相似:

Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

可以使用按钮或链接直接调用模态对话框,这是简单的用法:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打开对话框</button>

这样只能把静态内容在对话框中显示出来,使用对话框的 remote 选项可以实现更强大的效果。

2. 使用 remote 选项让模态对话框加载页面到 .modal-body 中

有两种方法,一种是使用链接,另一种就是使用脚本。

2.1 使用链接

<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打开对话框</a>

当点击此链接时,page.jsp 的内容会被加载到对话框的 .modal-body 中,随即显示对话框。

2.2 使用脚本

$("#myModal").modal({
 remote: "page.jsp"
});

这段脚本的效果和使用链接是一样的,当这段脚本执行后,page.jsp 的内容会被加载到对话框的 .modal-body 中,随即显示对话框。

这两种方法的背后,都是 Bootstrap 调用了 jQuery 的 load() 方法,从服务器端加载了 page.jsp 页面。但这个加载只会发生一次,后面不管你点击几次链接,或者执行几次脚本,哪怕改变传递给 remote 选项的值,对话框都不会重新加载页面,这真是个让人头疼的事情。不过问题还是能够解决的。

3. 移除数据,让对话框能够在每次打开时重新加载页面

在搜索并查阅了相关文档后,发现在对话框的 hidden 事件里写上一条语句就可以了:

$("#myModal").on("hidden", function() {
 $(this).removeData("modal");
});

也可以在每次打开对话框之前移除数据,效果是一样的。

注:上面的代码基于 Bootstrap v2,如果使用 Bootstrape v3,模态对话框的 HTML 和事件的写法有一些不同,例如对于上面的 hidden 事件,要写成:

$("#myModal").on("hidden.bs.modal", function() {
 $(this).removeData("bs.modal");
});

以上所述是小编给大家介绍的Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
最短的IE判断代码
Mar 13 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
JS 实现分页打印功能
May 16 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
详谈javascript精度问题与调整
Jul 08 #Javascript
You might like
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
js的回调函数详解
2015/01/05 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python内建数据结构详解
2016/02/03 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
岗位职责的构建方法
2014/02/01 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
工程索赔意向书
2014/08/30 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
律政俏佳人观后感
2015/06/09 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python