【转】bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法
http://blog.csdn.net/coolcaosj/article/details/38369787
bootstrap的modal中,有一个remote选项,可以动态加载页面到modal-body中
有两种方法,一种是使用链接,另一种就是使用脚本。
1 使用链接
<a href="user/userDetail.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a>
当点击该连接时,userDetail.jsp的内容就可以动态的加载到div.modal-body中。当然这里的连接也可以是action
2 使用脚本
- $("#myModal").modal({
- remote: "page.jsp"
- });
但是这样加载后,会有问题,modal数据只加载一次,如果要加载不同的数据,例如根据id查询不同物品的详细信息,modal的数据是不能更新的,即使传的id值不同。其实解决办法很简单,只需要在加载下次数据前,将之前的加载的数据清除即可。
清除之前加载的数据,让对话框能够在每次打开时重新加载页面
最简单的方式就是监听modal的hidden,当modal关闭时,即把数据清除即可:
- $("#myModal").on("hidden", function() {
- $(this).removeData("modal");
- });
也可以在每次打开对话框之前移除数据,效果是一样的。
注:上面的代码基于 Bootstrap v2,如果使用 Bootstrape v3,模态对话框的 HTML 和事件的写法有一些不同,例如对于上面的 hidden 事件,要写成:
- $("#myModal").on("hidden.bs.modal", function() {
- $(this).removeData("bs.modal");
- });
【转】bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法的更多相关文章
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- Bootstrap模态框modal的高度和宽度设置
(1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...
- bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Bootstrap模态框垂直居中展示的方法
在bootstrap.js中加入以下代码:
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
随机推荐
- Python面向对象的编程注意细节
和前文一样,这了也是学习过程中,来源于网上各种资料的一个整合记录,希望能够帮到自己和大家: 主要的关注点是在使用class的时候,应该注意的一些细节: 1.在class里面,有了 __init__(s ...
- shell运行java/Jar 脚本
1.Shell执行/调用Java/Jar程序 #!/bin/bash JAVA_HOME="$HOME/jdk" BASE_DIR=`dirname $0` if [ " ...
- EXTJS4.2 级联 下拉
items: [ { xtype: "fieldcontainer", layout: "hbox", items: [{ xtype: 'combo', na ...
- ajax02-XMLHttpRequest 对象的使用
XMLHttpRequest 是 AJAX 的基础,用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 对象 所有现代浏览器均 ...
- 调整JVM堆内存解决OutOfMemoryError
今天在用 processing(http://zh.wikipedia.org/wiki/Processing) 编写处理 midi 文件的程序的时候,遇到了一个问题.程序主要是读取分析 midi , ...
- 修改SpringBoot 默认的小叶子图标
Springboot 项目,在浏览器中访问时,浏览器上导航栏的图标是一片绿色的叶子,我们可以修改它. 将格式为.ico的图片放入以下任一项目文件夹即可.但,图片命名必须为favicon.ico 1.类 ...
- hdu 1695 GCD 莫比乌斯
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Linux下DB2的TCP配置
1切换到db2实例用户下(uppdb) su - uppdb 2查看db2是否开启tcp服务 db2set -all 设置tcp服务:db2set DB2COMM=TCPIP 3查看是否配置db2 t ...
- MDX跨cube查询——lookupcube
关于SSAS中从多个cube中查询数据 前提:涉及的cube在同一数据库中,维度共享(最好) SSAS中提供一条mdx语句同时从多个cube中查询数据的功能 实现该功能的就是lookupcube函数, ...
- 02-大鸭梨博客系统数据库设计及Dapper的使用
毫无疑问,数据库的设计在一个系统中起了至关重要的作用.我们都知道,系统设计分为两部分,或者说是两个阶段,即数据库设计和功能设计.构建一个完善的系统需要这两个阶段的充分考量.周密设计.合理联接以及密切配 ...