在模态中重新加载内容（twitter bootstrap） [英] Reload content in modal (twitter bootstrap)

问题描述

我正在使用twitter bootstrap的模态弹出窗口。

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>

我可以使用带有这个a元素的ajax加载内容：

I can load content using ajax with this a-element:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

现在我必须打开相同的模态，但使用不同的网址。我正在使用这个模态来编辑我的数据库中的实体。因此，当我在实体上单击编辑时，我需要加载带有ID的模态。

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>

如果我点击1号链接，它可以正常工作。但是，如果我点击第2个链接，模态内容已经加载，因此它将显示链接号1的内容。

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.

如何刷新或重置ajax在twitter bootstrap模式弹出窗口中加载内容？

How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup?

推荐答案

我遇到了同样的问题，我想这样做的方法会是删除data-toggle属性并为链接设置自定义处理程序。

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.

以下行中的内容：

$("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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！