Twitter引导远程模式每次都会显示相同的内容

我正在使用Twitter引导程序，我已经指定了一个模式

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

和链接

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

当我第一次单击任何一个链接时，我看到正确的内容，但是当我单击其他链接时，它显示第一次加载相同的内容，但不会更新该内容。

我希望它每次被单击时都进行更新。

PS：我可以通过自定义jQuery函数轻松地使其工作，但是我想知道是否可以使用本机Bootstrap模态远程功能，因为它应该很容易，我想这只是使事情变得复杂。

问题是双重的。

首先，实例化Modal对象后，它会永久地附加到由data-target以及随后的调用指定的元素上，以表明modal将仅对其调用toggle()，而不会更新。中的值options。因此，即使href您的不同链接上的属性不同，但切换模式时，其值remote也不会更新。对于大多数选项，可以通过直接编辑对象来解决此问题。例如：

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

但是，在这种情况下这是行不通的，因为...

其次，Modal插件旨在将远程资源加载到Modal对象的构造函数中，不幸的是，这意味着即使对进行了更改options.remote，也永远不会重新加载。

一种简单的补救方法是在随后的切换之前销毁Modal对象。一种选择是在隐藏完成后销毁它：

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

_{注意：根据需要调整选择器。这是最一般的。}

柱塞

或者，您可以尝试提出一种更复杂的方案来执行类似的操作，例如检查启动模式的链接是否不同于先前的链接。如果是，请销毁；否则，请销毁。如果不是，则无需重新加载。

对于引导程序3，您应使用：

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

对于Bootstrap 3.1，您将要删除数据并清空modal-content对话框而不是整个对话框（3.0），以避免在等待远程内容加载时闪烁。

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

如果您使用的是非远程模态，那么上面的代码当然会在关闭后删除其内容（错误）。您可能需要向这些模式（如.local-modal类）添加一些内容，以使它们不受影响。然后将上面的代码修改为：

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

谢谢。我开始对boostrap.js进行修改，但是您的答案是一种快速，干净的解决方法。这就是我最终在代码中使用的内容。

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});

可接受的答案对我不起作用，因此我使用JavaScript做到了。

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

这适用于Bootstrap 3 FYI

$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});

我的项目是在Yii中构建的，并使用Bootstrap-Yii插件，因此，仅当您使用Yii时此答案才有意义。

上面的修复程序确实有效，但是仅在第一次显示模态之后。第一次出现空白。我认为那是因为在我启动代码后，Yii调用了模式的hide函数，从而清除了我的启动变量。

我发现将removeData调用放在启动模式的代码之前就可以了。所以我的代码是这样构造的...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

在Bootstrap 3.2.0中，“ on”事件必须在文档上，并且您必须清空模式：

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

在Bootstrap 3.1.0中，“ on”事件可以出现在主体上：

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

为什么不使它与BS 3更通用？只需使用“ [something] modal”作为模态DIV的ID。

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

我唯一的工作选择是：

$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});

我使用Bootstrap 3，并且有一个名为的函数popup('popup content') ，该函数 会附加模式框html。

添加一个$（this）.html（''）; 也可以清除可见数据，并且效果很好

如果提供了远程URL，则将通过jQuery的load方法加载一次内容，并将其注入到.modal-content div中。如果您使用的是data-api，则可以选择使用href属性指定远程源。下面是一个示例

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

我添加了这样的内容，因为显示了较旧的内容，直到出现新内容为止，.modal-content内带有.html（''）可以清除其中的HTML，希望对您有所帮助

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

我写了一个简单的代码片段来处理模态的刷新。基本上，它将被单击的链接存储在模态数据中，并检查它是否与单击的链接相同，是否删除了模态数据。

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

对于Bootstrap 3，我在modal.js中进行了更改：

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

至

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

（为清楚起见增加了额外的间距）

通过在模式容器上调用empty（）并删除数据，可以防止旧的模式内容出现任何不必要的闪烁。

        $('#myModal').on('hidden.bs.modal', function () {
            $(this).removeData('modal');
        });

这对我有用。

另一种方法对我来说效果很好：

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

您想清空哪个html元素（div，span等等）。

这对我有用：

情态的

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

脚本

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

链接区域是我放置数据并需要清除的区域

@merv接受的答案的扩展版本。它还检查是否从远程源加载了被隐藏的模式，并清除了旧内容以防止其闪烁。

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

在Bootstrap版本3.3.2上测试

  $('#myModal').on('hide.bs.modal', function() {
    $(this).removeData();
  });

祝你好运：

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});