bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示
如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。下面是两个实例:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
$("#myModal").modal({
remote: "/info?id="+id,
backdrop: 'static',
keyboard: false
});
但是这样加载后,会有问题,modal数据只加载一次,如果要加载不同的数据,例如根据id查询不同物品的详细信息,modal的数据是不能更新的,即使传的id值不同。其实解决办法很简单,只需要在加载下次数据前,将之前的加载的数据清除即可。
解决方法:监听modal的hidden,当modal关闭时,即把数据清除即可。
代码如下
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
上面的代码基于 Bootstrap v2,如果使用的是 Bootstrape v3
$("#myModal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
或者
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
或者
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
或者
$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
https://www.cnblogs.com/zqifa/p/bootstrap-modal-1.html
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法的更多相关文章
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
- Bootstrap模态框modal的高度和宽度设置
(1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- bootstrap模态框远程加载网页的正确处理方式
bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...
随机推荐
- 转 jQuery中的$.extend方法来扩展JSON对象
$.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...
- css absolute同时设置top bottom
css absolute同时设置top bottom 确定div的高度,若设置了左边框,那么这条边框的高度将随着父定位上下文高度的变大而变大 http://www.webfront-js.com/ar ...
- 虚拟化技术QEMU-KVM入门
一.QEMU.KVM.QEMU-KVM QEMU提供一系列的硬件模拟设备(CPU,网卡,磁盘等),客户机指令都需要QEMU翻译,因而性能较差.KVM是linux内核提供的虚拟化,可以用来进行vCPU的 ...
- tomcat的webapps目录中的abc.war
1 在tomcat的webapps目录中,会有类似abc.war类型的文件,在tomcat启动时会自动解压为abc目录. 2 如果tomcat在运行中,不要直接删除abc.war文件,删除后,ab ...
- 使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...
- C++ 入门[1]
C++编译与执行 主存又称为寄存器,在CPU旁边, 随机访问储存器RAM 即内存
- dbms_redefinition方式普通表改造分区表
--创建一张普通表t_wjq1SEIANG@seiang11g>create table t_wjq1 as select object_id,object_name,created from ...
- 使用pkg打包Node.js应用的方法步骤
Node.js应用不需要经过编译过程,可以直接把源代码拷贝到部署机上执行,确实比C++.Java这类编译型应用部署方便.然而,Node.js应用执行需要有运行环境,意味着你需要先在部署机器上安装Nod ...
- 输出 1-100 内的奇数和偶数,并对其分别求和(while嵌套if-else循环)
package com.summer.cn; /** * @author Summer * 输出 1-100 内的奇数和偶数,并对其分别求和 * while嵌套if-else循环 */ public ...
- [Spark][kafka]kafka 生产者,消费者 互动例子
[Spark][kafka]kafka 生产者,消费者 互动例子 # pwd/usr/local/kafka_2.11-0.10.0.1/bin 创建topic:# ./kafka-topics.sh ...