详解bootstrap的modal-remote两种加载方式【强化】

方法一：

使用链接

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a>

当点击该连接时，demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中。当然这里的连接也可以是controller

方法二：

使用脚本

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

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

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

//v2
$("#myModal").on("hidden", function() {
  $(this).removeData("modal");
});
//v3
$("#myModal").on("hidden.bs.modal", function() {
  $(this).removeData("bs.modal");
});

问题来了：如果在请求的页面中有$()加载事件加载比如boostrap-validator或者boostrap-fileinput等插件会出现奇怪的现象，第一次正常执行，关掉modal，第二次，$()的代码没有执行，第三次能执行；经过反复发现“hidden.bs.modal”监听每次都执行了，但是加载到<div class="modal-content"></div>里面的数据没有被清除，可能是这个原因导致的这种现象，于是改成如下代码：

$("#myModal").on("hidden.bs.modal", function() {
  $(this).removeData("bs.modal");
  /*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
  $(this).find(".modal-content").children().remove();
});

如此这样问题解决了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • Bootstrap模态框调用功能实现方法

    Bootstrap模态框调用功能实现方法

    近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi

  • BootStrap3中模态对话框的使用

    1.引入jQuery.min.js: 2.引入bootstrap-modal.js: 3.操作按钮:<a href="#edit" data-toggle="modal">修改</a> 4.模态框 <div class="modal fade" id="edit"> <div class="modal-dialog "> <div class="

  • Bootstrap3 多个模态对话框无法显示的解决方案

    Bootstrap3 多个模态对话框无法显示的解决方案

    今天帮同事调了一个代码,他们的项目最近在用Bootstrap做开发,突然间,他遇到了一个奇怪的问题,如果一个页面中,有多个Modal对话框的话,排列在第一个的对话框,能够正确显示,第二个,只能导致页面出现MASK层,却不能显示Dialog. 如果调整顺序,仍然是第一个能显示,第二个只有页面变暗.效果如下: 第一个,正常弹出的Dialog 第二个无法弹出,只是页面变暗的dialog 而两个dialog的代码是完全一致的,具体的代码如下: <div class="modal fade"

  • 详解bootstrap的modal-remote两种加载方式【强化】

    方法一: 使用链接 <a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a> 当点击该连接时,demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中.当然这里的连接也可以是controller 方法二: 使用脚本 $("#myModal&

  • 详解Spring基于xml的两种依赖注入方式

    1)使用构造器注入bean 实体类:用户类 public class User { private String name; private UserMessage userMessage; public User() { } public User(String name, UserMessage userMessage) { this.name = name; this.userMessage = userMessage; } public String getName() { return

  • 详解IOS 单例的两种方式

    详解IOS 单例的两种方式 方法一: #pragma mark - #pragma mark sharedSingleton methods //单例函数 static RtDataModel *sharedSingletonManager = nil; + (RtDataModel *)sharedManager { @synchronized(self) { if (sharedSingletonManager == nil) { sharedSingletonManager = [[sel

  • 详解Swift model 解析的两种方法

    详解Swift model 解析的两种方法 1. 常规解析方法 //懒加载声明一个LJNewsModel为数据的数组 lazy var ljArray : [LJNewsModel] = [LJNewsModel]() //MARK:-- 数据获取和解析 extension NewsViewController{ func requestNetData(){ /* 打印json数据 */ LJDownLoadNetImage.request("GET", url: "http

  • 详解Nginx 和 PHP 的两种部署方式的对比

    详解Nginx 和 PHP 的两种部署方式的对比

    详解Nginx 和 PHP 的两种部署方式的对比 2种部署方式简介 第一种 前置1台nginx服务器做HTTP反向代理和负载均衡 后面N太服务器的Nginx做Web服务,并调用php-fpm提供的fast cgi服务 此种部署方式最为常见,web服务和PHP服务在同一台服务器上都有部署 第二种 前置1台nginx服务器做Web服务 后面服务器只部署php-fpm服务,供nginx服务器调用 前置1台nginx服务器,在调用后面多例php-fpm服务时,也可以做到负载均衡 如下图 : 对比 从系统

  • 详解java Collections.sort的两种用法

    Collections是一个工具类,sort是其中的静态方法,是用来对List类型进行排序的,它有两种参数形式: public static <T extends Comparable<? super T>> void sort(List<T> list) { list.sort(null); } public static <T> void sort(List<T> list, Comparator<? super T> c) {

  • 详解基于深度学习的两种信源信道联合编码

    详解基于深度学习的两种信源信道联合编码

    概述 经典端对端无线通信系统如下图所示: 信源 xx使用信源编码,去除冗余得到比特流 ss. 对 ss进行信道编码(如 Turbo.LDPC 等)得到 yy,增加相应的校验位来抵抗信道噪声. 对比特流 yy进行调制(如 BPSK.16QAM 等)得到 zz,并经物理信道发送. 接收端对经信道后的符号 \bar{z}zˉ 进行解调.解码操作得到 \bar{x}xˉ. 根据定义信道方式不同,基于深度学习的信源信道联合编码(Deep JSCC)可以分为两类. 第一类,受无编码传输的启发,将信源编码.信

  • 详解Spring集成Redis的两种方式

    详解Spring集成Redis的两种方式

    目录 一.使用Jedis方式集成 1.增加依赖 2.配置项 3.配置连接池 4.测试 使用spring-data-redis 1.引入依赖 2.配置项 3.使用 4.可能会遇到的坑 哨兵和集群 总结: 在工作中,我们用到分布式缓存的时候,第一选择就是Redis,今天介绍一下SpringBoot如何集成Redis的,分别使用Jedis和Spring-data-redis两种方式. 一.使用Jedis方式集成 1.增加依赖 <!-- spring-boot-starter-web不是必须的,这里是为

  • 详解QTreeWidget隐藏节点的两种方式

    详解QTreeWidget隐藏节点的两种方式

    目录 简述 方法一:直接隐藏式 方法二:间接隐藏式 结尾 简述 关于QTreeWidget隐藏节点有两种方式,一种是直接隐藏,一种是间接隐藏,但是两种方式各有差异,下面请听具体解说. 方法一:直接隐藏式 Qt助手里面提供了QTreeWidgetItem::setHidden方法,我们可以调用setHide(false)直接隐藏当前item.但是调用此方法会隐藏该节点下面的所有子节点. 图 1-1: 我们通过图1-2看到,调用此方法会将自己所有的孩子节点都给隐藏了,如果有这种需求的直接调用此方法即

  • 详解Spring Security 中的四种权限控制方式

    Spring Security 中对于权限控制默认已经提供了很多了,但是,一个优秀的框架必须具备良好的扩展性,恰好,Spring Security 的扩展性就非常棒,我们既可以使用 Spring Security 提供的方式做授权,也可以自定义授权逻辑.一句话,你想怎么玩都可以! 今天松哥来和大家介绍一下 Spring Security 中四种常见的权限控制方式. 表达式控制 URL 路径权限 表达式控制方法权限 使用过滤注解 动态权限 四种方式,我们分别来看.  1.表达式控制 URL 路径权

随机推荐