bootstrap 链接打开模态框数据无法刷新的解决方案


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

 

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();
});

如果觉得这文章还算用心,请劳驾点击右下角的推荐,这是对我们这些做开源分享的最大的肯定,谢谢。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值