Twitter引导远程模式每次都显示相同的内容

我正在使用Twitter引导，我已经指定了一个模式

<div class="modal hide" id="modal-item">


<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>


<form action="http://www.website.example/update" method="POST" class="form-horizontal">


<div class="modal-body">
Loading content...
</div>


<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>


</form>


</div>

还有链接

<a href="http://www.website.example/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.example/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.example/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

当我第一次点击这些链接时，我看到的是正确的内容，但当我点击其他链接时，它会显示第一次加载的相同内容，它不会更新内容。

我希望它在每次点击时都能更新。

p.s.:我可以很容易地使它通过自定义jQuery函数工作，但我想知道它是否可能与本地Bootstrap模态远程函数，因为它应该足够简单，我猜我只是复杂的事情。

178544 次浏览
小开
最佳答案

这个问题是双重的。

第一个中，一旦一个Modal对象被实例化，它将被持久地附加到由data-target和后续调用指定的元素上，以显示Modal只会对其调用toggle()，而不会更新options中的值。因此，即使不同链接上的href属性不同，当模式被切换时，remote的值不会被更新。对于大多数选项，可以通过直接编辑对象来解决这个问题。例如:

$('#myModal').data('bs.modal').options.remote = "http://website.example/item/7";

然而，在这种情况下，这行不通，因为……

第二个, Modal插件被设计用来加载Modal对象的远程资源在构造函数中，不幸的是，这意味着即使对options.remote， 它永远不会重新装填。

一个简单的补救方法是在后续切换之前销毁Modal对象。一种选择是在它隐藏完毕后销毁它:

$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});

备注:根据需要调整选择器。这是最普遍的。

< a href = " http://plnkr.co/edit/yMofRZ?p=preview" rel="nofollow noreferrer">活塞

或者你可以尝试想出一个更复杂的方案来做一些事情，比如检查启动模态的链接是否与前一个不同。若是，就毁灭;如果不是，那么就不需要重新加载。

小开

谢谢莫夫。我开始修补boostrap.js，但你的答案是一个快速和干净的解决方案。下面是我最终在代码中使用的代码。

$('#modal-item').on('hidden', function() {
$(this).removeData('modal');
});
小开

我的项目建在Yii &使用Bootstrap-Yii插件，所以这个答案只在你使用Yii时相关。

上面的修复工作，但只有在模态第一次显示之后。第一次一无所获。我认为这是因为在我启动代码后，Yii调用了模态的隐藏函数，从而清除了我的启动变量。

我发现在启动模态的代码之前立即调用removeData可以达到目的。所以我的代码是这样结构的…

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
小开

接受的答案不适合我，所以我使用JavaScript来完成它。

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">


<script>
$(function() {
$(".modal-link").click(function(event) {
event.preventDefault()
$('#myModal').removeData("modal")
$('#myModal').modal({remote: $(this).attr("href")})
})
})
小开
我写了一个简单的片段来处理模式的刷新。 基本上，它将被点击的链接存储在模态数据中，并检查它是否与被点击的链接相同，删除或不删除模态数据 
var handleModal = function()
{
$('.triggeringLink').click(function(event) {
var $logsModal = $('#logsModal');
var $triggeringLink = $logsModal.data('triggeringLink');


event.preventDefault();


if ($logsModal.data('modal') != undefined
&& $triggeringLink != undefined
&& !$triggeringLink.is($(this))
) {
$logsModal.removeData('modal');
}


$logsModal.data('triggeringLink', $(this));


$logsModal.modal({ remote: $(this).attr('href') });
$logsModal.modal('show');
});
};
小开

对于引导3，你应该使用:

$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
小开

这适用于Bootstrap 3供参考

$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
小开

为什么不让它在bsm3中更通用呢?只需使用“[something]modal”作为模式DIV的ID。

$("div[id$='modal']").on('hidden.bs.modal',
function () {
$(this).removeData('bs.modal');
}
);
小开

添加$(this).html(");也可以清除可见数据，效果很好

小开

对于Bootstrap 3，在modal.js中我更改了:

$(document)
.on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

来

$(document)
.on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal').empty()
$(document.body).removeClass('modal-open')
})

(为清晰起见，增加了额外的间距)

这可以通过在模态容器上调用empty()并删除数据来防止任何不必要的旧模态内容的闪现。

小开

对于Bootstrap 3.1，你需要删除数据并清空modal-content而不是整个对话框(3.0)，以避免在等待远程内容加载时闪烁。

$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});

如果你使用的是非远程模态，那么上面的代码当然会在关闭后删除它们的内容(不好)。你可能需要给这些情态动词添加一些东西(比如.local-modal类)，这样它们就不会受到影响。然后将上述代码修改为:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
小开

如果提供了远程URL，内容将通过jQuery的负载方法加载一次，并注入到.modal-content div中。如果使用data-api，也可以使用href属性指定远程源。下面是一个示例

$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
小开 
        $('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('modal');
});

这个适合我。

小开

在Bootstrap 3.2.0中，“on”事件必须在文档上，你必须清空模式:

$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});

在Bootstrap 3.1.0中，“on”事件可以在body上:

$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
小开

在Bootstrap 3.3.2版本上测试

  $('#myModal').on('hide.bs.modal', function() {
$(this).removeData();
});
小开

另一种方法对我来说很管用:

$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
小开 
$('body').on('hidden.bs.modal', '.modal', function () {
$("#mention Id here what you showed inside modal body").empty()
});

你想清空哪个html元素，比如(div,span等等)。

小开

我唯一的工作选择是:

$('body').on('hidden.bs.modal', '#modalBox', function () {
$(this).remove();
});
我使用Bootstrap 3，我有一个函数叫做 popup('popup content') 它附加了模态框html。< / p >
小开

我已经添加了这样的东西，因为旧的内容显示直到新的出现，与.html(")在.modal-content将清除HTML里面，希望它有帮助

$('#myModal').on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').find('.modal-content').html('');
});
小开

这个对我很有用:

模态

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
</div>
<div class="modal-body">
<input type="hidden" name="location">
<input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
<div class="links-area" id="links-area"></div>
</div>
<div class="modal-footer">
</div>
</div> </div></div>

脚本

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

链接区域是我放置数据和需要清除的区域

小开

祝你好运:

$('#myModal').on('hidden.bs.modal', function () {
location.reload();
});
小开

@merv接受的答案的扩展版本。它还检查被隐藏的模态是否从远程源加载，并清除旧内容以防止它闪烁。

$(document).on('hidden.bs.modal', '.modal', function () {
var modalData = $(this).data('bs.modal');


// Destroy modal if has remote source – don't want to destroy modals with static content.
if (modalData && modalData.options.remote) {
// Destroy component. Next time new component is created and loads fresh content
$(this).removeData('bs.modal');
// Also clear loaded content, otherwise it would flash before new one is loaded.
$(this).find(".modal-content").empty();
}
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5


提交答案