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 使用脚本


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

但是这样加载后,会有问题,modal数据只加载一次,如果要加载不同的数据,例如根据id查询不同物品的详细信息,modal的数据是不能更新的,即使传的id值不同。其实解决办法很简单,只需要在加载下次数据前,将之前的加载的数据清除即可。

清除之前加载的数据,让对话框能够在每次打开时重新加载页面

最简单的方式就是监听modal的hidden,当modal关闭时,即把数据清除即可:

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

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

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

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

参考:http://blog.csdn.net/a657941877/article/details/18145023

【转】bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法的更多相关文章

  1. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  2. bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  3. 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭

    在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...

  4. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  5. Bootstrap模态框modal的高度和宽度设置

    (1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...

  6. bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)

    /查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

  7. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. Bootstrap模态框垂直居中展示的方法

    在bootstrap.js中加入以下代码:

  9. 基于bootstrap模态框的alert弹窗

    完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...

  10. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

随机推荐

  1. Request对象介绍(客户端到服务器)

    1.处理请求和响应的过程request,response,关于request可以从三个方面着手学习.1:如何获取请求头  行  体   2:请求中文处理     3:请求对象的其它常用方法 1.1:r ...

  2. java深入探究14-lucene

    项目代码:链接:http://pan.baidu.com/s/1qXVcfCw 密码:apw1 01 回顾索引 定义:索引是对数据库表中一列或多列的值进行排序的一种结构 目的:加快对数据库表中记录的查 ...

  3. 微信开发之SSM环境搭建

    首先,感谢大神的文章,地址:http://blog.csdn.net/zhshulin/article/details/37956105# 第一步:新建maven项目 如有需要,查看之前的文章:从配置 ...

  4. SpringBoot-新建项目

    在开发SpringBoot之前,先下载STS开发工具,当然也可以用myeclipse等工具. STS官方下载地址:https://spring.io/tools/sts 下载安装完成后:File--& ...

  5. Codeforces Round #373 (Div. 2) A , B , C

    A. Vitya in the Countryside time limit per test 1 second memory limit per test 256 megabytes input s ...

  6. NAT(网络地址转换)协议

    NAT(Network Address Translator)是网络地址转换,它实现内网的IP地址与公网的地址之间的相互转换,将大量的内网IP地址转换为一个或少量的公网IP地址,减少对公网IP地址的占 ...

  7. mysql数据简单去重

    我有一个 foo 表,定义了如下几个字段:id / a / b,其中 id 是主键,a,b 原本应该具有唯一性, 但因为程序 bug 导致 a,b 内容有重复,现在我要在 a,b 上加唯一索引,请问如 ...

  8. 解析PHP中intval()等int转换时的意外异常情况

    <?php$a = 9.45*100;var_dump($a);var_dump(intval($a));$a = 945*1.00;var_dump($a);var_dump(intval($ ...

  9. T-SQL_面试题

    创建表插入数据 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname ...

  10. 51nod 1732 LCS变形

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1732 1732 51nod婚姻介绍所 题目来源: 原创 基准时间限制:1 ...