基于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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
vue实现多级菜单效果
Oct 19 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 #Javascript
vue子父组件通信的实现代码
Jul 09 #Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
You might like
php Ubb代码编辑器函数代码
2012/07/05 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP echo()函数讲解
2019/02/15 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Python对列表中的各项进行关联详解
2017/08/15 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python__name__原理及用法详解
2019/11/02 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python实现处理mysql结果输出方式
2020/04/09 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
介绍java中初始化块的使用
2012/09/11 面试题
问卷调查计划书
2014/01/10 职场文书
小学生作文评语
2014/04/18 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2014年行政工作总结
2014/11/19 职场文书
技术员岗位职责范本
2015/04/11 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android