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

举报
lxw1844912514 发表于 2022/03/29 00:37:12 2022/03/29
【摘要】 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性...

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

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100027893

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。