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

https://www.cnblogs.com/zqifa/p/bootstrap-modal-1.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112378.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 解决‘E: 无法获得锁 /var/lib/dpkg/lock-frontend – open (11: 资源暂时不可用) ’ 问题[通俗易懂]

    解决‘E: 无法获得锁 /var/lib/dpkg/lock-frontend – open (11: 资源暂时不可用) ’ 问题[通俗易懂]报错无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)首先查看下ls/var/lib/dpkg/lock-frontend然后删除sudo-r-f/var/lib/dpkg/lock-frontend如果依然报错无法获得锁/var/lib/dpkg/lock-open(11:资源暂时不可用)’删…

    2022年10月7日
    0
  • macbook双系统文件共享_华为双系统短信共享吗

    macbook双系统文件共享_华为双系统短信共享吗MacBook安装双系统多分区共享访问解决方案1.   需求在MacBook中安装Win7,mac双系统。磁盘分区为4个(A,B,C,D),其中A(300G),B(400G)存放个人和系统无关的东西并实现两个系统都能访问A、B;C(150G)安装Win764位系统;D(150G)安装MacOS系统。双系统之间互不影响,也就是说如果Win7

    2022年10月5日
    0
  • SQL基本语法入门 看这里就够了

    SQL基本语法入门 看这里就够了SQL执行顺序第一步:执行FROM第二步:WHERE条件过滤第三步:GROUPBY分组第四步:执行SELECT投影列第五步:HAVING条件过滤第六步:执行ORDERBY排序一、创建、删除库–创建新数据库CREATEDATABASE数据库名;–删除数据库DROPDATABASE数据库名;二、增加1、添加列名、设置主键、设…

    2022年5月29日
    33
  • w7设置双显示器_4K+144Hz 支持FreeSync Acer XV273K显示器评测

    w7设置双显示器_4K+144Hz 支持FreeSync Acer XV273K显示器评测2018年末,AMD宣布旗下FreeSync技术正式升级为RadeonFreeSync2HDR技术,带来了亮度、对比度、层次感更加完美的游戏画面,尤其是针对HDR游戏。而在随后的CES2019上,NVIDIA对G-Sync进行了重新分级,其中G-SyncCompatible标准正式开启FreeSync显示器兼容模式。两大“劲敌”的一系列动作意味着,未来FreeSync显示器或将成为更多游…

    2022年5月6日
    66
  • EasyDSS流媒体服务器软件(支持RTMP/HLS/HTTP-FLV/视频点播/视频直播)-正式环境安装部署攻略

    EasyDSS流媒体服务器软件(支持RTMP/HLS/HTTP-FLV/视频点播/视频直播)-正式环境安装部署攻略EasyDSS流媒体服务器软件,提供一站式的转码、点播、直播、时移回放服务,极大地简化了开发和集成的工作。其中,点播功能主要包含:上传、转码、分发。直播功能,主要包含:直播、录像,直播支持RTMP输入,RTMP/HLS/HTTP-FLV的分发输出;录像支持自定义保存时长、检索及下载。提供丰富的二次开发接口,基于JSON的封装及HTTP调用。提供播放鉴权、推流鉴权等安全保证。提供用户及相关权限管…

    2022年6月5日
    42
  • 主机通过虚拟机上网「建议收藏」

    主机通过虚拟机上网「建议收藏」实现结果:WIN7X64主机通过XPMODE虚拟机共享上网大家现在总会碰到各种蛋疼的拨号软件、终端认证软件,而你偏偏又是用4G、8G内存装的是64位的系统或者是LINUX等非主流系统。这时候通过虚拟机32位的XP拨号、认证算是一种无奈的办法。虚拟机通过主机上网的办法是满天飞啦,可是主机通过虚拟机上网的办法我是在网上暂时没有找到。所以我自己为这个也是研究了好几天,终于倒腾出来了,和大家分享一下

    2022年5月12日
    41

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号