基于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 实用的文字链提示框效果
Jun 30 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
Vue SSR 组件加载问题
May 02 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
详谈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
织梦模板标记简介
2007/03/11 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
JavaScript类库D
2010/10/24 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
经贸日语专业个人求职信范文
2013/12/28 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
我爱我班主题班会
2015/08/13 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers