以模式重新加载内容（推特引导程序）

Posted 2023-02-22

【中文标题】以模式重新加载内容（推特引导程序）

【英文标题】：Reload content in modal (twitter bootstrap)

【发布时间】：2012-09-09 02:47:27

【问题描述】：

我正在使用 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 加载的内容？

【问题讨论】：

Twitter bootstrap remote modal shows same content everytime的可能重复

遇到了同样的问题并习惯了同样的解决方案。由于某些奇怪的原因，我从 jquery 求助于 .attr() 函数 .data() 函数不起作用。

【参考方案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"); 
    );
);

稍后会尝试并发布 cmets。

【讨论】：

$('.modal').on('hidden', function() $(this).removeData(); ) 这是我对以下解决方案的修改......更干净，因为你不必捕捉点击并自行加载，因此程序化模型展示仍然有效

我正在使用 Bootstrap 3，模态中的内容每次都会刷新，但它会创建两个模态窗口。其他人得到这个吗？

嘿，Sid，你用“modal-body”类创建了 2 个 div，实际上你已经在创建它，而模态正在再次创建。从该代码中删除“.modal-body”，应该可以正常工作。

使用 Bootstrap 3 为我工作，非常令人沮丧的是核心引导库默认不支持这一点。

@markz，我也在使用类似的东西和 ev.preventDefault();同样，但仍然单击链接，当我获得模态窗口时，我所有页面的下拉列表都将被重置。任何想法，如何防止？

【参考方案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');
);

【讨论】：

完美。工作没有任何问题。在引导程序3中。我使用了 $('.modal').on('hidden.bs.modal', function() $(this).removeData('bs.modal'); );

不完美：它在新内容之前简要显示旧内容。

@Laurent，你可以通过添加.html('')来清除之前的内容。因此，对于 2.x：$(this).removeData('modal').find('.modal-body').html('')。对于 3：$(this).removeData('bs.modal').html('') 2.x 将内容加载到 .modal-body 中，而 3 将内容直接加载到 .modal 容器中

对最后一条评论的小修正，在 bootstrap v3 中应该是： $(e.target).removeData('bs.modal').html('');这是迄今为止最优雅的解决方案（但有点延迟）。

我使用了@Softlion 在这个提议的解决方案中发布的编辑/版本 - 它有效，我没有遇到任何速度/延迟问题。

【参考方案3】：

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

this.$element.removeData()

或者使用事件监听器

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

【讨论】：

-1 将第一个 sn-p 直接放入 Modal 插件的想法是一个糟糕的想法。如果您要破解插件（我会避免），更合理的做法是将load() 调用移出构造函数并移入show()，或者向插件添加一个方法手动触发remote 的重新加载。关于第二个建议，我只提供了 an answer for a question，它明确要求不要这样做 the way @markz suggested。

我喜欢听者的方法。我认为甚至可以使用“.modal”而不是“#modal”来改进它，以避免对 id 进行硬编码。在我看来，这是一种比 markz 更清洁的方法，因为您继续使用原始引导模式中的数据切换。

我想知道为什么这个答案没有得到太多支持。这个答案似乎是第一个建议使用非常有趣且快速实现的事件监听器的答案。

【参考方案4】：

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

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

【讨论】：

是的，但是这个解决方案仍然存在一个关键的滞后；它仍然会在新内容之前显示旧内容一到三秒。

而不是#modal try body

【参考方案5】：

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

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

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

仍然可能会接受已接受的答案，因为我在模态加载之前遇到了一些难看的跳跃，因为控件是使用 Bootstrap 进行的。

【参考方案6】：

比上面接受的例子压缩了一点。从当前单击的任何带有 data-toggle=modal 的数据目标中获取目标。这使得您不必知道目标模式的 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>

【参考方案7】：

我对@9​​87654321@ 答案做了一个小改动，所以我所有的模态都不会在隐藏时刷新。 具有 data-refresh='true' 属性的模态仅刷新，其他的照常工作。 这是修改后的版本。

$(document).on('hidden.bs.modal', function (e) 
    if ($(e.target).attr('data-refresh') == 'true') 
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    
);

现在使用如下所示的属性，

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

这将确保仅刷新 data-refresh='true' 的模式。而且我还在重置模态 html，因为旧值会一直显示，直到新值被加载，从而使 html 空修复了那个。

【参考方案8】：

这是一个适合我的咖啡脚本版本。

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

【讨论】：

它解决了内容重新加载但模态中的js没有第二次执行的问题

【参考方案9】：

它适用于所有版本的 twitterbootstrap

javascript 代码：

<script type="text/javascript">
/* <![CDATA[ */
(function()
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) 
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    );
 )();
/* <![CDATA[ */
</script>

模态链接是

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

弹出模态

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

【参考方案10】：

我也被这个问题困住了，然后我看到模态的 ids 是相同的。如果你想要多个模态，你需要不同的模态 ids。我使用了动态 id。这是我在haml 中的代码：

.modal.hide.fade"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"

你可以这样做

<div id="<%= some.id %>" 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 data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

我希望这对你有用。

【参考方案11】：

你可以试试这个：

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

【参考方案12】：

我希望在模态关闭时删除 AJAX 加载的内容，所以我调整了其他人建议的行（coffeescript 语法）：

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

【参考方案13】：

var $table = $('#myTable2'); $table.bootstrapTable('destroy');

为我工作

【参考方案14】：

第 1 步：为名为 clone-modal-wrapper 的模态创建一个包装器。

第 2 步：创建一个名为 modal-wrapper 的空白 div。

第 3 步：将模态元素从 clone-modal-wrapper 复制到 modal-wrapper。

第四步：切换modal-wrapper的模态。

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <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>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) 
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
);