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.example/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.example/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.example/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.example/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

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

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

p.s.:我可以很容易地使它通过自定义jQuery函数工作，但我想知道它是否可能与本地Bootstrap模态远程函数，因为它应该足够简单，我猜我只是复杂的事情。

当前回答

对于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()并删除数据来防止任何不必要的旧模态内容的闪现。

2013-12-10 20:49:38

其他回答

这个问题是双重的。

首先，一旦一个Modal对象被实例化，它就会被持久地附加到data-target和后续调用指定的元素上，以显示Modal只会对其调用toggle()，而不会更新选项中的值。因此，即使不同链接上的href属性不同，当模式被切换时，remote的值不会被更新。对于大多数选项，可以通过直接编辑对象来解决这个问题。例如:

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

然而，在这种情况下，这行不通，因为……

其次，Modal插件被设计为在Modal对象的构造函数中加载远程资源，不幸的是，这意味着即使对选项进行了更改。遥控器，它永远不会被重新加载。

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

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

注意:根据需要调整选择器。这是最普遍的。

砰砰作响

或者你可以尝试想出一个更复杂的方案来做一些事情，比如检查启动模态的链接是否与前一个不同。若是，就毁灭;如果不是，那么就不需要重新加载。

2012-09-05 17:58:21

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

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

2014-03-24 07:35:59

对于Bootstrap 3.1，你会想要删除数据并清空模态内容，而不是整个对话框(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();
});

2014-02-26 19:42:43

接受的答案不适合我，所以我使用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")})
    })
})

2012-10-21 15:15:59

@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

2016-03-31 14:04:25

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

推荐文章

最新文章

标签