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模态远程函数，因为它应该足够简单，我猜我只是复杂的事情。

当前回答

我已经添加了这样的东西，因为旧的内容显示直到新的出现，与.html(")在.modal-content将清除HTML里面，希望它有帮助

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

2015-09-23 18:30:05

其他回答

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

为什么不让它在bsm3中更通用呢?只需使用“[something]modal”作为模式DIV的ID。

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

2013-09-10 05:27:55

谢谢莫夫。我开始修补boostrap.js，但你的答案是一个快速和干净的解决方案。下面是我最终在代码中使用的代码。

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

2012-09-20 01:28:46

添加$(this).html(");也可以清除可见数据，效果很好

2013-09-12 22:33:52

对于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

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

推荐文章

最新文章

标签