jQuery Twitter bootstrap 远程模式每次都显示相同的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12286332/
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
Twitter bootstrap remote modal shows same content every time
提问by Dhruv Kumar Jha
I am using Twitter bootstrap, I have specified a modal
我正在使用 Twitter 引导程序，我指定了一个模态
<div class="modal hide" id="modal-item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>
<form action="http://www.website.com/update" method="POST" class="form-horizontal">
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>
</form>
</div>
And the links
和链接
<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
When I click on any of these link for the first time, I see the correct content, but when I click on other links it shows the same content loaded for the first time, it doesn't update the content.
当我第一次点击这些链接中的任何一个时，我看到了正确的内容，但是当我点击其他链接时，它显示了第一次加载的相同内容，它不会更新内容。
I want it to be updated every time its clicked.
我希望每次点击时都会更新它。
P.S : I can easily make it work via custom jQuery function, but I want to know if it's possible with native Bootstrap modal remote function, as it should be easy enough and I guess I am just complicating things.
PS：我可以通过自定义 jQuery 函数轻松地使其工作，但我想知道是否可以使用本机 Bootstrap 模态远程函数，因为它应该很容易，我想我只是让事情复杂化了。
回答by merv
The problem is two-fold.
问题是双重的。
First, once a Modal object is instantiated, it is persistently attached to the element specified by data-targetand subsequent calls to show that modal will only call toggle()on it, but will not update the values in the options. So, even though the hrefattributes are different on your different links, when the modal is toggled, the value for remoteis not getting updated. For most options, one can get around this by directly editing the object. For instance:
首先，一旦 Modal 对象被实例化，它就会持久地附加到由data-target和后续调用指定的元素，以表明 modal 只会调用toggle()它，而不会更新options. 因此，即使href不同链接上的属性不同，当切换模态时， 的值remote也不会更新。对于大多数选项，可以通过直接编辑对象来解决此问题。例如：
$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";
However, that won't work in this case, because...
但是，在这种情况下这不起作用，因为...
Second, the Modal plugin is designed to load the remote resource in the constructorof the Modal object, which unfortunately means that even if a change is made to the options.remote, it will never be reloaded.
其次，Modal 插件旨在在 Modal 对象的构造函数中加载远程资源，不幸的是，这意味着即使对 进行了更改options.remote，也永远不会重新加载。
A simple remedy is to destroy the Modal object before subsequent toggles. One option is to just destroy it after it finishes hiding:
一个简单的补救方法是在后续切换之前销毁 Modal 对象。一种选择是在完成隐藏后将其销毁：
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Note:Adjust the selectors as needed. This is the most general.
注意：根据需要调整选择器。这是最普遍的。
Plunker
普朗克
Or you could try coming up with a more complicated scheme to do something like check whether the link launching the modal is different from the previous one. If it is, destroy; if it isn't, then no need to reload.
或者你可以尝试提出一个更复杂的方案来做一些事情，比如检查启动模态的链接是否与前一个不同。如果是，销毁；如果不是，则无需重新加载。
回答by Camilo Nova
For bootstrap 3 you should use:
对于引导程序 3，您应该使用：
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
回答by slopapa
For Bootstrap 3.1 you'll want to remove data and empty the modal-contentrather than the whole dialog (3.0) to avoid the flicker while waiting for remote content to load.
对于 Bootstrap 3.1，您需要删除数据并清空modal-content对话框 (3.0) 而不是整个对话框，以避免在等待远程内容加载时出现闪烁。
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
If you are using non-remote modals then the above code will, of course, remove their content once closed (bad). You may need to add something to those modals (like a .local-modalclass) so they aren't affected. Then modify the above code to:
如果您使用的是非远程模式，那么上面的代码当然会在关闭（坏）后删除它们的内容。您可能需要向这些模态（如.local-modal类）添加一些内容，以便它们不受影响。然后将上面的代码修改为：
$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
回答by Bienvenido David
Thanks merv. I started tinkering around boostrap.js but your answer is a quick and clean workaround. Here's what I ended up using in my code.
谢谢默夫。我开始修补 boostrap.js，但您的答案是一种快速而干净的解决方法。这是我最终在代码中使用的内容。
$('#modal-item').on('hidden', function() {
$(this).removeData('modal');
});
回答by James Ward
The accepted answer didn't work for me, so I went with JavaScript to do it.
接受的答案对我不起作用，所以我用 JavaScript 去做了。
<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">
<script>
$(function() {
$(".modal-link").click(function(event) {
event.preventDefault()
$('#myModal').removeData("modal")
$('#myModal').modal({remote: $(this).attr("href")})
})
})
回答by Dave Sag
This works with Bootstrap 3 FYI
这适用于 Bootstrap 3 仅供参考
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
回答by Sean Toru
My project is built in Yii & uses the Bootstrap-Yii plugin, so this answer is only relevant if you're using Yii.
我的项目是在 Yii 中构建的并使用 Bootstrap-Yii 插件，所以这个答案只在你使用 Yii 时才相关。
The above fix did work but only after the first time the modal was shown. The first time it came up empty. I think that's because after my initiation of the code Yii calls the hide function of the modal thereby clearing out my initiation variables.
上述修复确实有效，但仅在第一次显示模态之后。第一次空空如也。我认为这是因为在我启动代码后，Yii 调用了模态的隐藏函数，从而清除了我的启动变量。
I found that putting the removeData call immediately before the code that launched the modal did the trick. So my code is structured like this...
我发现将 removeData 调用放在启动模态的代码之前就行了。所以我的代码结构是这样的......
$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
回答by Romain
In Bootstrap 3.2.0 the "on" event has to be on the document and you have to empty the modal :
在 Bootstrap 3.2.0 中，“on”事件必须在文档上，你必须清空 modal ：
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
In Bootstrap 3.1.0 the "on" event can be on the body :
在 Bootstrap 3.1.0 中，“on”事件可以在 body 上：
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
回答by user2763645
Why not make it more general with BS 3? Just use "[something]modal" as the ID of the modal DIV.
为什么不使用 BS 3 使它更通用？只需使用“[something]modal”作为模态 DIV 的 ID。
$("div[id$='modal']").on('hidden.bs.modal',
function () {
$(this).removeData('bs.modal');
}
);
回答by Orkun Tuzel
Only working option for me is:
对我来说唯一的工作选择是：
$('body').on('hidden.bs.modal', '#modalBox', function () {
$(this).remove();
});
I use Bootstrap 3 and I have a function called
popup('popup content')which appends the modal box html.
我使用 Bootstrap 3 并且我有一个函数调用
popup('popup content')它附加模态框 html。
