问题描述
我正在使用 twitter bootstrap 的模态弹出窗口.
<div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>标题</h3><div class="modal-body"></div><div class="modal-footer"><input type="submit" class="btn btn-success" value="保存"/>
我正在使用 twitter bootstrap 的模态弹出窗口.
<div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>标题</h3><div class="modal-body"></div><div class="modal-footer"><input type="submit" class="btn btn-success" value="保存"/>
我可以使用带有这个 a 元素的 ajax 加载内容:
<a data-toggle="modal" data-target="#myModal" href="edit.aspx">打开模态</a>
现在我必须打开相同的模式,但使用不同的 url.我正在使用此模式来编辑我的数据库中的实体.因此,当我单击实体上的编辑时,我需要使用 ID 加载模态.
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">打开模态</a><a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">打开模态</a><a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">打开模态</a>
如果我点击链接 1,它工作正常.但是,如果我然后单击链接号 2,模态内容已经加载,因此它将显示链接号 1 的内容.
如何在 Twitter 引导模式弹出窗口中刷新或重置 ajax 加载的内容?
我遇到了同样的问题,我想这样做的方法是删除 data-toggle 属性并为链接设置一个自定义处理程序.
以下内容:
$("a[data-target=#myModal]").click(function(ev) {ev.preventDefault();var target = $(this).attr("href");//加载 url 并在成功时显示模态$("#myModal .modal-body").load(target, function() {$("#myModal").modal("show");});});
稍后会尝试并发表评论.
I'm using twitter bootstrap's modal 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>
I can load content using ajax with this a-element:
<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.
<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.
How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup?
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.
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.
这篇关于以模态重新加载内容(twitter bootstrap)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!