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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (67)

我正在使用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>

当我第一次点击这些链接时,我会看到正确的内容,但当我点击其他链接时,它会显示第一次加载的相同内容,它不会更新内容。

我希望它每次点击时都能更新。

可以通过自定义jQuery函数使它运行,但是我想知道是否可以使用本机的Bootstrap模式远程函数

提问于
用户回答回答于

有两个问题

第一,一旦一个Modal对象被实例化,它将持久地附加到data-target以及随后的调用,这种模式只会调用toggle()上的值,但不会更新options所以,即使href属性是不同的,当模式被切换时,remote没有得到更新。可以通过直接编辑对象来解决这个问题。例如:

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

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

第二,Modal插件被设计为加载远程资源。意味着options.remote,,,它永远不会被重新装载...

一个简单的补救方法是在随后的切换之前删除Modal对象。另一种选择是在它完成隐藏后删除它:

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

注:根据需要调整选择器。

或者,你可以尝试检查启动模式的链接是否与前一个不同。如果是的话,删除;如果不是,那就不需要重新装载。

用户回答回答于

我是这样做的

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

我使用Bootstrap 3,我有一个函数名为popup('popup content')它使用了了modal框

用户回答回答于

为什么不让BS3更通用呢?将某些modal作为div的modal ID。

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

在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');
});
用户回答回答于

我的项目使用Bootstra-Yii插件在Yii中构建的,所以这个答案只有你使用YII的时候才可以。

上面的修正确实有效,但只在第一次显示模态之后才起作用。第一次空出来的时候。我认为这是因为在我初始化代码之后,Yii调用了模态的隐藏函数,从而清除了我的初始化变量。

我发现,在启动该模式的代码之前,将远程数据调用放在前面是很有用的。所以我的代码是这样的..。

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
用户回答回答于

这适用于Bootstrap 3 FYI

$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.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")})
    })
})
用户回答回答于

我在bostrap.js上进行修复,下面是我的解决方案。

$('#modal-item').on('hidden', function() {
    $(this).removeData('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();
});
用户回答回答于

对于bootstrap 3,你应该使用:

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

扫码关注云+社区