bootstrap 链接打开模态框数据无法刷新的解决方案
来源:互联网 发布:淘宝淘客联盟 编辑:程序博客网 时间:2024/06/14 10:36
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();
});
如果觉得这文章还算用心,请劳驾点击右下角的推荐,这是对我们这些做开源分享的最大的肯定,谢谢。
- bootstrap 链接打开模态框数据无法刷新的解决方案
- bcp备份数据表报“无法打开宿主数据文件”的解决方案
- 无法打开控制台的解决方案
- Struts2的Action中getXXX()方法刷新后无法保存数据的解决方案
- Struts2的Action中getXXX()方法刷新后无法保存数据的解决方案
- IE无法打开链接的处理方法
- IE无法打开链接的处理方法
- IE无法打开链接的处理方法
- 无法打开网站二级链接的解决办法
- HttpURLConnection无法打开含有中文的链接
- ASP FAQ,无法打开关键字的解决方案
- CHM文件无法正常打开的解决方案
- Firefox无法打开VMWare console的解决方案
- 系统无法打开.exe可执行文件的解决方案
- n97 sdk 模拟器无法打开的解决方案。
- .chm文件无法打开的解决方案
- SharePoint2010 Central Admin无法打开的解决方案
- mac Hbuilder 无法打开的解决方案
- std::thread
- 欢迎使用CSDN-markdown编辑器
- 工具类——使用Timber自定义日志并保存文件查看
- 7月书讯:众多畅销书升级!
- C++之++和--操作符重载
- bootstrap 链接打开模态框数据无法刷新的解决方案
- 接口编写规范
- Prototype(原型模式)
- nc6报错 Failed to load ESAPI.properties as a classloader resource.
- hdu 1896 Stones
- 解决org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z
- cordova device插件——获取设备信息
- leetcode-77-Combinations
- 求二叉树叶子节点的个数/求二叉树第k层的节点个数。