以模态重新加载内容（twitter bootstrap）

IT技术 javascript twitter-bootstrap
2021-03-20 11:32:55

我正在使用 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 引导模式弹出窗口中刷新或重置 ajax 加载的内容？

6个回答

我遇到了同样的问题，我想这样做的方法是删除 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"); 
    });
});

稍后会尝试并发表评论。

嘿 Sid，您使用“modal-body”类创建了 2 个 div，实际上您已经在创建它，并且模态正在再次创建。从该代码中，删除 '.modal-body' 应该可以正常工作。
2021-04-22 11:32:55
$('.modal').on('hidden', function() { $(this).removeData(); }) 这是我对以下解决方案的修改......更干净，因为你不必捕捉点击和加载它是你的自我，所以程序化模型展示仍然有效
2021-04-23 11:32:55
使用 Bootstrap 3 对我有用，非常令人沮丧的是，默认情况下，核心引导程序库不支持此功能。
2021-05-01 11:32:55
我正在使用 Bootstrap 3，模态中的内容每次都会刷新，但它会创建两个模态窗口。有没有其他人得到这个？
2021-05-07 11:32:55
@markz，我也在使用这样的东西和 ev.preventDefault(); 同样，但仍然单击链接，当我获得模式窗口时，我所有页面的下拉列表都将重置。任何想法，如何防止？
2021-05-17 11:32:55

要在模式关闭时卸载数据，您可以在 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');
});
不完美：它在新内容之前简要显示旧内容。
2021-04-24 11:32:55
@Laurent，您可以通过添加 .html('') 清除以前的内容。所以，对于 2.x： $(this).removeData('modal').find('.modal-body').html(''). 对于 3： $(this).removeData('bs.modal').html('') 2.x 将内容加载到 .modal-body 中，而 3 将内容直接加载到 .modal 容器中
2021-04-29 11:32:55
对最后一条评论的小更正，在 bootstrap v3 中应该是： $(e.target).removeData('bs.modal').html(''); 这是迄今为止最优雅的解决方案（但它有点延迟）。
2021-05-04 11:32:55
我使用了@Softlion 在这个提议的解决方案中发布的编辑/版本 - 它有效并且我没有遇到任何速度/延迟问题。
2021-05-14 11:32:55
完美的。工作没有任何问题。在引导程序 3. 我使用了 $('.modal').on('hidden.bs.modal', function() { $(this).removeData('bs.modal'); });
2021-05-15 11:32:55

您可以通过在 Modal 插件的 hide 方法的末尾添加这一行来强制 Modal 刷新弹出窗口（如果您使用的是 bootstrap-transition.js v2.1.1，它应该在第 836 行）

this.$element.removeData()

或者使用事件侦听器

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})
我喜欢倾听者的方法。我认为它甚至可以使用 '.modal' 而不是 '#modal' 来改进，以避免对 id 进行硬编码。在我看来，这是一种比 markz 更简洁的方法，因为您继续像在原始引导模式中一样使用数据切换。
2021-04-21 11:32:55
我想知道为什么这个答案没有得到太多赞成。这个答案似乎是第一个建议使用一个非常有趣且快速实现的事件监听器的答案。
2021-04-25 11:32:55
-1 将第一个片段直接放入 Modal 插件的想法是一个糟糕的想法。如果你打算破解插件（我会避免），更合理的做法是将load()调用移出构造函数并移入show()，或者向插件添加一个方法以手动触发重新加载remote. 在第二个建议中，我只提供了一个问题的答案，该问题明确要求不要按照@markz 建议的方式进行操作。
2021-05-20 11:32:55

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

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});
而不是#modal try body
2021-04-29 11:32:55
是的，但是这个解决方案仍然存在一个关键的滞后；它仍然会在新内容之前显示一秒钟或三秒钟的旧内容。
2021-05-11 11:32:55

基于其他答案（谢谢大家）。

我需要调整代码才能工作，因为简单地调用 .html 会清除整个内容，并且在我这样做后模态不会加载任何内容。所以我只是寻找模态的内容区域并在那里应用 HTML 的重置。

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

仍然可能采用已接受的答案，因为我在模态加载之前出现了一些丑陋的跳跃，因为控件是 Bootstrap。

其它你可能感兴趣的问题
上一篇使用 JavaScript 遍历日期范围 下一篇Backbone.View "el" 混淆