【转】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 ...
随机推荐
- linux 安装mysql服务
1.检查是否已安装,grep的-i选项表示匹配时忽略大小写 rpm -qa|grep -i mysql *可见已经安装了库文件,应该先卸载,不然会出现覆盖错误.注意卸:载时使用了--nodeps选项, ...
- Efficient Vector Representation for Documents through Corruption-by Minmin Chen阅读
关键词: 词向量.文档向量.文档表示 地址:https://openreview.net/forum?id=B1Igu2ogg¬eId=B1Igu2ogg 首先,论文解决的是Word2V ...
- Spring data jpa 实现简单动态查询的通用Specification方法
本篇前提: SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法 这篇文章中的第二种方法 实现Specification 这块的方法 只适用于一个对象针对某一个固定字 ...
- Linux ls命令参数详解
-a -- 全部(all).列举目录中的全部文件,包括隐藏文件(.filename).位于这个列表的起首处的 .. 和 . 依次是指父目录和你的当前目录. -l -- 长(long).列举目 ...
- java 学习汇总
一.安装svn 插件 1.svn - http://subclipse.tigris.org/update 安装的过程中可能出错,解决方法: 导航到:The Eclipse Project Updat ...
- Http协议与生命周期
一.Http知识: 1.基于socket 浏览器(格式一) web服务器(格式一) MYSQL客户端(格式二) MYSQL服务端(格式三) ...
- CDH- cdh kafka已经卸载了,但是服务器还有kafka-topics这些命令可用,导致重新安装kafka出现问题
cdh界面删除并不会将 kafka数据删除,需要将kafka集群节点 var/local/kafka/data 清理掉 然后将zk brokers/topics 下的topic也清理掉
- nvm工具
nvm工具 nvm简介 nvm是node version manager的简称,是nodeJs的版本管理器,他可以在一台主机上对node的版本进行方便的切换.我尝试了一下window的,但是不行,你可 ...
- tableau join 与格式问题
一开始我没有找到它的join 方法.其实应该是编辑相应的join关系.选择数据源,选择字段.数据源是可以选择的. 剩下的计算问题,要再弄下.不好说,这个其实烦了我很久了. 高级选项,扩展最大行数.即可 ...
- Incorrect string value: '\xE7\x8E\x8B\xE4\xBD\xB3' for column 'contact' at row 1
1 queries executed, 0 success, 1 errors, 0 warnings 查询:INSERT INTO beijing(contact,tel_phone,qq,comp ...