我无法使用 ajax 重新加载引导弹出窗口的内容。这是一些代码: http: //pastie.org/3960102
第二个 ajax 请求(当我单击“a.close”时)返回更新的内容(我可以在控制台中看到它),但它没有加载到弹出框内。
我四处寻找解决方案,它们似乎都不起作用。
我还能尝试什么?谢谢
我无法使用 ajax 重新加载引导弹出窗口的内容。这是一些代码: http: //pastie.org/3960102
第二个 ajax 请求(当我单击“a.close”时)返回更新的内容(我可以在控制台中看到它),但它没有加载到弹出框内。
我四处寻找解决方案,它们似乎都不起作用。
我还能尝试什么?谢谢
data-content
您可以直接访问弹出框工具提示内容,而不是重置属性。
替换以下行:
t.attr('data-content', r);
使用此工作代码:
t.data('popover').tip().html(r);
2012 年更新
正如Pigueiras在他的评论中指出的那样,这将破坏弹出框的默认模板。更好的解决方案是替换以下内容.popover-content
:
t.data('popover').tip().find('.popover-content').empty().append(r);
2016 年更新
感谢另一条评论,这里是 Bootstrap 3 的工作代码:
t.data('bs.popover').tip().find('.popover-content').empty().append(r);
为什么empty()
以及append()
何时可以更换?
t.data('popover').tip().find('.popover-content').html(r);
编辑:
此外,当 popover 已经初始化并且您想要动态更改内容时,第一种方法是正确的并且工作正常(bootstrap 2.1)。您只需'show'
再次调用弹出框即可刷新(内容和位置):
t.attr('data-content', r);
t.popover('show');
经过几个小时的搜索,我想通了。对于 Bootstrap 3,您可以使用下面的代码。更多参考是:
https ://github.com/twbs/bootstrap/issues/11528和Bootstrap 弹出内容不能动态更改
if($element.data('bs.popover')) {
$element.data('bs.popover').options.content = 'NEW CONTENT';
}
同样的问题,我用这个技巧解决了它,代码很冗长,只是一个例子,优化它!
// functions container
var doc =
{
doPopover : function( item_id, title, content )
{
// get jq item
var item = $('#' + item_id );
// the trick to "refresh content" in every call
item.attr('data-content', content);
// popover
item.popover(
{
title : title,
trigger : 'manual'
}).popover('show');
},
popoverFirstCall : function()
{
this.doPopover('myDiv', 'Title', 'MyContent1');
},
popoverSecondCall : function()
{
var content = 'xxx'; // get the content in Ajax
this.doPopover('myDiv', 'Title', content);
}
}
// call funcs in your views
$(document).ready(function()
{
// first popover with first content
doc.popoverFirstCall();
// this event wich call the ajax content and refresh popover.
$('#button').on('click', $.proxy(doc, 'popoverSecondCall'));
});
我想刷新标题的技巧也是一样的。
如果您有更好的解决方案,请告诉我!
编辑 :
我继续调查,
我们可以在插件代码上看到:
getContent: function () {
var content
, $e = this.$element
, o = this.options
content = $e.attr('data-content')
|| (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
return content
}
因此,内容是在 attr "data-content" 上获取的,或者在 popover 的第一次调用(实例化)时给出的选项上。
但是,实际上,问题是,选项被缓存并且不会在每次调用时刷新,所以必须使用:
$('item_id').attr('data-content', 'some content'); // and warning, it is different than
$('item_id').data('content', 'some content');
引导程序获得 attr 方式。
标题相同:
getTitle: function () {
var title
, $e = this.$element
, o = this.options
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
所以,doPopover 函数可以是:
doPopover : function( item_id, title, content )
{
// get jq item
var item = $('#' + item_id );
// the trick to "refresh content" in every call
item.attr('data-content', content); // do not use data() way.
item.attr('data-original-title', title);
// popover (trace first call if you want)
item.popover(
{
trigger : 'manual'
});
item.popover('show);
}
为我工作得很好。
这项工作形成了我:Inizialize popover on document ready(数据是一个带有 HTML 和找到元素大小的 json)
$.ajax({
url: "/alpha/annuncio/scegliGestione",
success: function (data) {
$('#notifiche').popover(
{
title:"Le tue notifiche",
placement:'bottom',
trigger:'manual'
});
$('#notifiche').find(".badge").text(data.size);
}
});
在 popover 的触发事件上,您必须依次切换 popover(显示或隐藏),使 popover-content 为空,最后附加 data.html
$("#notifiche").click(function(){
$.get("/alpha/annuncio/scegliGestione", function(data) {
$('#notifiche').popover('toggle')
$("body").find('.popover-content').empty()
$("body").find('.popover-content').append(data.html);
$('#notifiche').find(".badge").text(data.size);
});
/* */
});