javascript - 以模式重新加载内容(twitter bootstrap)

Question

我正在使用 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>

我可以使用带有此 a 元素的 ajax 加载内容:

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

现在我必须打开相同的模式但使用不同的 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>

如果我点击链接 1，它工作正常。但是，如果我随后单击链接 2，模态内容已经加载，因此它将显示链接 1 中的内容。

如何刷新或重置 Twitter Bootstrap 模式弹出窗口中的 ajax 加载内容？

Answer 1

我想这样做的方法是删除 data-toggle 属性并为链接设置一个自定义处理程序。

内容如下:

$("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"); 
    });
});