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 bootstrap模式弹出窗口中刷新或重置ajax加载的内容?
12 个解决方案
#1
94
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.
稍后会尝试并发表评论。
#2
63
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');
});
#3
21
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();
})
#4
15
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');
});
#5
8
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。
#6
5
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.
比上面接受的例子稍微压缩一点。使用data-toggle = modal on从当前单击任何内容的数据目标中抓取目标。这使得你不必知道目标模态的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>
#7
2
I made a small change to Softlion answer, 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空修复了一个。
#8
1
It will works for all version of twitterbootstrap
它适用于所有版本的twitterbootstrap
Javascript code :
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>
links to modal are
与模态的链接是
<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>
pop up modal
弹出模态
<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>
#9
1
Here is a coffeescript version that worked for me.
这是一个适合我的coffeescript版本。
$(document).on 'hidden.bs.modal', (e) ->
target = $(e.target)
target.removeData('bs.modal').find(".modal-content").html('')
#10
1
I was also stuck on this problem then I saw that the ids of the modal are the same. You need different ids of 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.
我希望这对你有用。
#11
0
I wanted the AJAX loaded content removed when the modal closed, so I adjusted the line suggested by others (coffeescript syntax):
我希望在模态关闭时删除AJAX加载的内容,所以我调整了其他人建议的行(coffeescript语法):
$('#my-modal').on 'hidden.bs.modal', (event) ->
$(this).removeData('bs.modal').children().remove()
#12
0
You can try this:
你可以试试这个:
$('#modal').on('hidden.bs.modal', function() { $(this).removeData('bs.modal'); });
$('#modal')。on('hidden.bs.modal',function(){$(this).removeData('bs.modal');});
#1
94
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.
稍后会尝试并发表评论。
#2
63
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');
});
#3
21
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();
})
#4
15
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');
});
#5
8
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。
#6
5
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.
比上面接受的例子稍微压缩一点。使用data-toggle = modal on从当前单击任何内容的数据目标中抓取目标。这使得你不必知道目标模态的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>
#7
2
I made a small change to Softlion answer, 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空修复了一个。
#8
1
It will works for all version of twitterbootstrap
它适用于所有版本的twitterbootstrap
Javascript code :
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>
links to modal are
与模态的链接是
<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>
pop up modal
弹出模态
<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>
#9
1
Here is a coffeescript version that worked for me.
这是一个适合我的coffeescript版本。
$(document).on 'hidden.bs.modal', (e) ->
target = $(e.target)
target.removeData('bs.modal').find(".modal-content").html('')
#10
1
I was also stuck on this problem then I saw that the ids of the modal are the same. You need different ids of 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.
我希望这对你有用。
#11
0
I wanted the AJAX loaded content removed when the modal closed, so I adjusted the line suggested by others (coffeescript syntax):
我希望在模态关闭时删除AJAX加载的内容,所以我调整了其他人建议的行(coffeescript语法):
$('#my-modal').on 'hidden.bs.modal', (event) ->
$(this).removeData('bs.modal').children().remove()
#12
0
You can try this:
你可以试试这个:
$('#modal').on('hidden.bs.modal', function() { $(this).removeData('bs.modal'); });
$('#modal')。on('hidden.bs.modal',function(){$(this).removeData('bs.modal');});