以模态重新加载内容(twitter bootstrap) [英] Reload content in modal (twitter bootstrap)

问题描述

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