Twitter bootstrap远程模式每次都显示相同的内容

Question

我正在使用Twitter bootstrap,我已经指定了一个模态

<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模式远程功能,因为它应该很容易,我想我只是让事情复杂化.

Answer 1

问题是双重的.

首先,一旦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');
});

_{注意:根据需要调整选择器.这是最普遍的.}

Plunker

或者你可以尝试想出一个更复杂的方案,像做检查启动模式的链路是否是从以前的一个不同.如果是,毁灭; 如果不是,则无需重新加载.

Answer 2

对于bootstrap 3,你应该使用:

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

Answer 3

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

Answer 4

谢谢merv.我开始修改boostrap.js,但你的答案是一个快速而干净的解决方法.这是我最终在我的代码中使用的内容.

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

Answer 5

接受的答案对我不起作用,所以我选择使用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")})
    })
})

Answer 6

这适用于Bootstrap 3 FYI

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

Answer 7

我的项目是在Yii中构建的并且使用了Bootstrap-Yii插件,所以这个答案只有在你使用Yii时才有意义.

上面的修复工作确实有效,但仅在第一次显示模态之后.它第一次出现空洞.我认为那是因为在我启动代码之后,Yii调用了模态的隐藏功能,从而清除了我的启动变量.

我发现在启动模式的代码之前立即放置removeData调用就可以了.所以我的代码结构如下......

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

Answer 8

在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');
});