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