Javascript 以模态重新加载内容（twitter bootstrap）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12449890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload content in modal (twitter bootstrap)
提问by stian.net
I'm using twitter bootstrap's modal popup.
我正在使用 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>
I can load content using ajax with this a-element:
我可以使用带有这个 a 元素的 ajax 加载内容：
<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>
Now I have to open the same modal but using a different url. I'm using this modal to edit an entity from my database. So when I click edit on an entity I need to load the modal with an ID.
现在我必须打开相同的模式，但使用不同的 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>
If I click on link number 1, it works fine. But if I then click on link number 2 the modal content is already loaded and therefor it will show the content from link number 1.
如果我点击链接 1，它工作正常。但是，如果我然后单击链接编号 2，则模式内容已经加载，因此它将显示链接编号 1 的内容。
How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup?
如何在 Twitter 引导模式弹出窗口中刷新或重置 ajax 加载的内容？
采纳答案by markz
I am having the same problem, and I guess the way of doing this will be to remove the data-toggle attribute and have a custom handler for the links.
我遇到了同样的问题，我想这样做的方法是删除 data-toggle 属性并为链接设置一个自定义处理程序。
Something in the lines of:
在以下方面的东西：
$("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");
});
});
Will try it later and post comments.
稍后会尝试并发表评论。
回答by Steffen Wenzel
To unload the data when the modal is closed you can use this with Bootstrap 2.x:
要在模式关闭时卸载数据，您可以在 Bootstrap 2.x 中使用它：
$('#myModal').on('hidden', function() {
$(this).removeData('modal');
});
And in Bootstrap 3 (https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516):
在 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');
});
回答by Sergio
You can force Modal to refresh the popup by adding this line at the end of the hide method of the Modal plugin (If you are using bootstrap-transition.js v2.1.1, it should be at line 836)
您可以通过在 Modal 插件的 hide 方法的末尾添加这一行来强制 Modal 刷新弹出窗口（如果您使用的是 bootstrap-transition.js v2.1.1，它应该在第 836 行）
this.$element.removeData()
Or with an event listener
或者使用事件侦听器
$('#modal').on('hidden', function() {
$(this).data('modal').$element.removeData();
})
回答by Art
With Bootstrap 3 you can use 'hidden.bs.modal' event handler to delete any modal-related data, forcing the popup to reload next time:
使用 Bootstrap 3，您可以使用 'hidden.bs.modal' 事件处理程序删除任何与模态相关的数据，强制弹出窗口下次重新加载：
$('#modal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
回答by Modika
Based on other answers (thanks everyone).
基于其他答案（谢谢大家）。
I needed to adjust the code to work, as simply calling .html wiped the whole content out and the modal would not load with any content after i did it. So i simply looked for the content area of the modal and applied the resetting of the HTML there.
我需要调整代码才能工作，因为简单地调用 .html 会清除整个内容，并且在我这样做后模态不会加载任何内容。所以我只是寻找模态的内容区域并在那里应用 HTML 的重置。
$(document).on('hidden.bs.modal', function (e) {
var target = $(e.target);
target.removeData('bs.modal')
.find(".modal-content").html('');
});
Still may go with the accepted answer as i am getting some ugly jump just before the modal loads as the control is with Bootstrap.
仍然可能采用已接受的答案，因为我在模态加载之前出现了一些丑陋的跳跃，因为控件是 Bootstrap。
回答by geilt
A little more compressed than the above accepted example. Grabs the target from the data-target of the current clicked anything with data-toggle=modal on. This makes it so you don't have to know what the id of the target modal is, just reuse the same one! less code = win! You could also modify this to load title, labels and buttons for your modal should you want to.
比上面接受的例子压缩得更多。从当前单击的任何数据目标的数据目标中抓取目标，数据切换=模式打开。这使得您不必知道目标模态的 id 是什么，只需重复使用相同的 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");
});
});
Example Links:
示例链接：
<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>
回答by Shiva Avula
I made a small change to Softlionanswer, so all my modals won't refresh on hide. The modals with data-refresh='true' attribute are only refreshed, others work as usual. Here is the modified version.
我对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('');
}
});
Now use the attribute as shown below,
现在使用如下所示的属性，
<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>
This will make sure only the modals with data-refresh='true' are refreshed. And i'm also resetting the modal html because the old values are shown until new ones get loaded, making html empty fixes that one.
这将确保只有 data-refresh='true' 的模态被刷新。而且我还重置了模态 html，因为旧值会一直显示，直到加载新值，使 html 为空来修复该值。
回答by rgagnon
Here is a coffeescript version that worked for me.
这是一个对我有用的咖啡脚本版本。
$(document).on 'hidden.bs.modal', (e) ->
target = $(e.target)
target.removeData('bs.modal').find(".modal-content").html('')
回答by bharat
You can try this:
你可以试试这个：
$('#modal').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
回答by Asnad Atta
I was also stuck on this problem then I saw that the idsof the modal are the same. You need different idsof modals if you want multiple modals. I used dynamic id. Here is my code in haml:
我也被这个问题困住了，然后我看到模态的id是相同的。如果您想要多个模态，则需要不同的模态ID。我使用了动态id。这是我的代码haml：
.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
you can do this
你可以这样做
<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>
and your links to modal will be
你的模态链接将是
<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>
I hope this will work for you.
我希望这对你有用。
