小编典典

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

all

我正在使用 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.com/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.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

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

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

PS:我可以通过自定义 jQuery 函数轻松地使其工作,但我想知道它是否可以使用本机 Bootstrap
模态远程函数,因为它应该很容易,我想我只是让事情复杂化。


阅读 74

收藏
2022-05-16

共1个答案

小编典典

问题有两个方面。

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

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

但是,这在这种情况下不起作用,因为…

其次,Modal 插件被设计为在 Modal 对象 的构造函数 中加载远程资源,不幸的是,这意味着即使更改了options.remote
也永远不会重新加载

一个简单的补救措施是在后续切换之前销毁 Modal 对象。一种选择是在它完成隐藏后将其销毁:

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

注意: 根据需要调整选择器。这是最一般的。

普朗克

或者你可以尝试想出一个更复杂的方案来做一些事情,比如检查启动模式的链接是否与前一个不同。如果是,则销毁;如果不是,则无需重新加载。

2022-05-16