重新加载模式内容（twitter bootstrap）

我正在使用twitter bootstrap的模式popup窗口。

<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的内容。

如何刷新或重置ajax加载的内容在twitter引导模式popup？

Answer 1

我有同样的问题，我想这样做的方式是删除数据切换属性，并有一个链接的自定义处理程序。

一些在以下方面的内容：

 $("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

要在模式closures时卸载数据，可以在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通过在Modal插件的hide方法的末尾添加此行来刷新popup窗口（如果使用的是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'事件处理程序来删除任何模式相关的数据，强制popup窗口下次重新加载：

 $('#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是什么，只需重复使用同一个！ less代码=赢！ 你也可以修改这个来为你的模态加载标题，标签和button。

  $("[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> 

Answer 7

它将适用于所有版本的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> 

popup模态

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

Answer 8

我对Softlion的答案做了一个小小的改动，所以我所有的模态都不会刷新。 具有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，因为旧的值显示，直到新的加载，使空的修复，一个。

Answer 9

这是一个咖啡的脚本版本，为我工作。

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

Answer 10

我也被困在这个问题上，然后我看到模态的ID是一样的。 如果你想要多个模态，你需要不同的模态ID 。 我使用dynamicID 。 这是我在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> 

我希望这会对你有用。

Answer 11

我想在模式closures的时候删除AJAX加载的内容，所以我调整了别人build议的行（coffeescript语法）：

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