关于jquery：Twitter bootstrap远程模式每次都显示相同的内容


Twitter bootstrap remote modal shows same content every time

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <button type="button" class="close" data-dismiss="modal">x</button>
        Update Item
   

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

   
        Loading content...
   

   
        Close
        <button class="btn btn-primary" type="submit">Update Item</button>
   

    </form>

以及链接

1
2
3
Edit 1
Edit 2
Edit 2

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

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

P.S：我可以通过自定义jquery函数很容易地使它工作，但是我想知道是否可以使用本地引导模式远程函数，因为它应该足够简单，我想我只是把事情复杂化了。

相关讨论

问题是双重的。

首先，一旦一个modal对象被实例化，它就会持续地附加到data-target指定的元素上，并且随后的调用会显示modal只调用toggle()，但不会更新options中的值。因此，即使不同链接上的href属性不同，但在切换模式时，remote的值不会得到更新。对于大多数选项，可以通过直接编辑对象来绕过这个问题。例如:

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

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

第二，modal插件被设计为在modal对象的构造函数中加载远程资源，这意味着即使对options.remote进行了更改，也不会重新加载它。

一个简单的补救方法是在随后的切换之前销毁模式对象。一种选择是在它完成隐藏后销毁它：

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

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

柱塞

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

相关讨论

对于引导程序3，您应该使用：

1
2
3
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
相关讨论

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

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

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

1
2
3
$(document).on("hidden.bs.modal",".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});
相关讨论

谢谢。我开始对boosttrap.js进行修补，但您的答案是快速而干净的解决方案。下面是我在代码中使用的代码。

1
2
3
$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});

接受的答案对我不起作用，所以我用JavaScript来做。

1
2
3
4
5
6
7
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})
相关讨论

这与引导程序3 Fyi一起工作

1
2
3
$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});

我的项目是内置的yii&；使用bootstrap yii插件，因此只有在使用yii时，此答案才相关。

上面的修正方法确实有效，但只是在第一次显示模态之后。第一次空出来的时候。我认为这是因为在我启动代码后，yii调用了模式的hide函数，从而清除了我的启动变量。

我发现，将removedata调用放在启动模式的代码之前就完成了这个技巧。所以我的代码结构是这样的…

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

在bootstrap 3.2.0中，"on"事件必须在文档上，并且必须清空模式：

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

在bootstrap 3.1.0中，"on"事件可以在主体上：

1
2
3
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
相关讨论

为什么不在BS 3中更通用呢？只需使用"[something]modal"作为modal div的ID。

1
2
3
4
5
$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

我唯一的工作选择是：

1
2
3
$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});

我使用bootstrap 3，我有一个函数popup('popup content')它附加了模式框HTML。

相关讨论

添加一个$(this).html("")；来清除可见数据，而且效果非常好

如果提供了远程URL，内容将通过jquery的加载方法加载一次，并注入到.modal content div中。如果使用的是数据API，则可以使用href属性指定远程源。下面是一个例子

1
2
3
4
$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

我添加了类似这样的内容，因为在新内容出现之前会显示旧内容，其中包含.html("")。模式内容将清除其中的html，希望它有帮助。

1
2
3
4
$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
$(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

1
2
3
        $('#myModal').on('hidden.bs.modal', function () {
            $(this).removeData('modal');
        });

这个对我有用。

另一种方法对我很有效：

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

您想清空哪个HTML元素，比如(DIV，SPAN随便什么)。

我写了一个简单的片段来处理模式的刷新。基本上，它将单击的链接存储在模式数据中，并检查它是否与已单击的链接相同，删除或不删除模式数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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');
    });
};

这个适合我：

情态动词

1
2
3
4
5
6
    <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>
 
 
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />

脚本

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

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

对于引导程序3，在modal.js中，我更改了：

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

到

1
2
3
4
5
6
$(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()以及删除数据来防止旧模式内容的任何不需要的闪存。

在引导程序版本3.3.2上测试

1
2
3
  $('#myModal').on('hide.bs.modal', function() {
    $(this).removeData();
  });
相关讨论

祝你好运：

1
2
3
$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});
相关讨论