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. Python面向对象的编程注意细节

    和前文一样,这了也是学习过程中,来源于网上各种资料的一个整合记录,希望能够帮到自己和大家: 主要的关注点是在使用class的时候,应该注意的一些细节: 1.在class里面,有了 __init__(s ...

  2. shell运行java/Jar 脚本

    1.Shell执行/调用Java/Jar程序 #!/bin/bash JAVA_HOME="$HOME/jdk" BASE_DIR=`dirname $0` if [ " ...

  3. EXTJS4.2 级联 下拉

    items: [ { xtype: "fieldcontainer", layout: "hbox", items: [{ xtype: 'combo', na ...

  4. ajax02-XMLHttpRequest 对象的使用

    XMLHttpRequest 是 AJAX 的基础,用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 对象 所有现代浏览器均 ...

  5. 调整JVM堆内存解决OutOfMemoryError

    今天在用 processing(http://zh.wikipedia.org/wiki/Processing) 编写处理 midi 文件的程序的时候,遇到了一个问题.程序主要是读取分析 midi , ...

  6. 修改SpringBoot 默认的小叶子图标

    Springboot 项目,在浏览器中访问时,浏览器上导航栏的图标是一片绿色的叶子,我们可以修改它. 将格式为.ico的图片放入以下任一项目文件夹即可.但,图片命名必须为favicon.ico 1.类 ...

  7. hdu 1695 GCD 莫比乌斯

    GCD Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. Linux下DB2的TCP配置

    1切换到db2实例用户下(uppdb) su - uppdb 2查看db2是否开启tcp服务 db2set -all 设置tcp服务:db2set DB2COMM=TCPIP 3查看是否配置db2 t ...

  9. MDX跨cube查询——lookupcube

    关于SSAS中从多个cube中查询数据 前提:涉及的cube在同一数据库中,维度共享(最好) SSAS中提供一条mdx语句同时从多个cube中查询数据的功能 实现该功能的就是lookupcube函数, ...

  10. 02-大鸭梨博客系统数据库设计及Dapper的使用

    毫无疑问,数据库的设计在一个系统中起了至关重要的作用.我们都知道,系统设计分为两部分,或者说是两个阶段,即数据库设计和功能设计.构建一个完善的系统需要这两个阶段的充分考量.周密设计.合理联接以及密切配 ...