Twitter引导程序远程模态每次都显示相同的内容 [英] Twitter bootstrap remote modal shows same content every time

问题描述

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

I am using Twitter bootstrap, I have specified a modal

<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>

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

When I click on any of these link for the first time, I see the correct content, but when I click on other links it shows the same content loaded for the first time, it doesn't update the content.

我希望它在每次单击时都进行更新.

I want it to be updated every time its clicked.

P.S:我可以轻松地通过自定义jQuery函数使其工作，但是我想知道使用本地Bootstrap模态远程功能是否可行，因为它应该很容易，我想这只是使事情复杂化了.

P.S : I can easily make it work via custom jQuery function, but I want to know if it's possible with native Bootstrap modal remote function, as it should be easy enough and I guess I am just complicating things.

推荐答案

问题有两个方面.

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

First, once a Modal object is instantiated, it is persistently attached to the element specified by data-target and subsequent calls to show that modal will only call toggle() on it, but will not update the values in the options. So, even though the href attributes are different on your different links, when the modal is toggled, the value for remote is not getting updated. For most options, one can get around this by directly editing the object. For instance:

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

但是，在这种情况下这是行不通的，因为...

第二，Modal插件旨在将远程资源加载到Modal对象的构造函数中，这不幸的是，即使对options.remote，它将永远不会重新加载.

However, that won't work in this case, because...

Second, the Modal plugin is designed to load the remote resource in the constructor of the Modal object, which unfortunately means that even if a change is made to the options.remote, it will never be reloaded.

一个简单的补救方法是在随后的切换之前销毁Modal对象.一种选择是在完成隐藏后将其销毁:

A simple remedy is to destroy the Modal object before subsequent toggles. One option is to just destroy it after it finishes hiding:

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

_{注意:根据需要调整选择器.这是最一般的.}

_{Note: Adjust the selectors as needed. This is the most general.}

或者您可以尝试提出一种更复杂的方案，例如检查启动该模式的链接是否不同于前一个.如果是，请销毁；否则，请销毁.如果不是，则无需重新加载.

Or you could try coming up with a more complicated scheme to do something like check whether the link launching the modal is different from the previous one. If it is, destroy; if it isn't, then no need to reload.

这篇关于Twitter引导程序远程模态每次都显示相同的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！