zoukankan      html  css  js  c++  java
  • 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();
    });

  • 相关阅读:
    Asp中JSON的使用
    POJ 3243 Clever Y Extended-Baby-Step-Giant-Step
    [Java开发之路](16)学习log4j日志
    【剑指Offer学习】【面试题49:把字符串转换成整数】
    负载均衡器&amp;http正向代理
    Android应用开发经常使用知识
    java8_api_nio
    李洪强经典面试题25(选择题)
    李洪强经典面试题24
    李洪强经典面试题23
  • 原文地址:https://www.cnblogs.com/zqifa/p/bootstrap-modal-1.html
Copyright © 2011-2022 走看看