在模态中重新加载内容(twitter bootstrap)

Question

我正在使用twitter bootstrap的模态弹出窗口.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

我可以使用带有这个a元素的ajax加载内容:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

现在我必须打开相同的模态,但使用不同的URL.我正在使用这个模态来编辑我的数据库中的实体.因此,当我在实体上单击编辑时,我需要加载带有ID的模态.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

如果我点击1号链接,它可以正常工作.但是,如果我再单击链接号2,则模态内容已经加载,因此它将显示链接号1的内容.

如何在twitter bootstrap模式弹出窗口中刷新或重置ajax加载的内容？

Answer 1

我遇到了同样的问题,我想这样做的方法是删除data-toggle属性并为链接提供自定义处理程序.

有些东西:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

稍后会尝试并发表评论.

Answer 2

要在关闭模态时卸载数据,可以在Bootstrap 2.x中使用它:

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

在Bootstrap 3中(https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516):

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Answer 3

您可以通过在Modal插件的hide方法的末尾添加此行来强制Modal刷新弹出窗口(如果您使用的是bootstrap-transition.js v2.1.1,则应该在第836行)

this.$element.removeData()

或者使用事件监听器

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

Answer 4

使用Bootstrap 3,您可以使用'hidden.bs.modal'事件处理程序删除任何与模态相关的数据,强制弹出窗口下次重新加载:

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

Answer 5

基于其他答案(感谢大家).

我需要调整代码才能工作,因为简单地调用.html擦除了整个内容,并且在我完成之后模式不会加载任何内容.所以我只是寻找模态的内容区域并在那里应用HTML的重置.

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

仍然可以使用已接受的答案,因为我在模态加载之前得到一些丑陋的跳跃,因为控件是使用Bootstrap.

Answer 6

比上面接受的例子稍微压缩一点.使用data-toggle = modal on从当前单击任何内容的数据目标中抓取目标.这使得你不必知道目标模态的id是什么,只需重用同一个模块即可!少代码=胜利!你也可以修改它来为你的模态加载标题,标签和按钮.

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

示例链接:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>