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

问题描述

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

<div class="modal-header"><button type="button" class="close" data-dismiss="modal">x</button><h3>更新项目</h3>
<form action="http://www.website.com/update" method="POST" class="form-horizo​​ntal"><div class="modal-body">正在加载内容...

<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">关闭</a><button class="btn btn-primary" type="submit">更新项目</button>

</表单>

还有链接

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

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

>

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

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

解决方案

问题有两方面.

首先，一旦一个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');});

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

Plunker

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

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>

And the links

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

解决方案

The problem is two-fold.

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

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.

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

Plunker

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 bootstrap 远程模式每次都显示相同的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！