64

我使用如下代码：

$(".reply").popover({
  content: "Loading...",
  placement: "bottom"
});

$(".reply").popover("toggle");

正确创建弹出框及其内容。我想在不关闭弹出框的情况下将新数据加载到弹出框中。

我尝试了以下方法：

var thisVal = $(this);
$.ajax({
  type: "POST",
  async: false,
  url: "Getdes",
  data: { id: ID }
}).success(function(data) {
  thisVal.attr("data-content", data);
});

在此调用之后，元素中的数据会更改，但不会在显示的弹出框中更改。

我该怎么做？

4

15 回答 15

85

如果你像这样抓住弹出框实例：

var popover = $('.reply').data('bs.popover');

然后，要重绘弹出框，请使用以下.setContent()方法：

popover.setContent();

我发现浏览源代码：https ://github.com/twitter/bootstrap/blob/master/js/popover.js

因此，在您的示例中，请尝试：

thisVal.attr('data-content',data).data('bs.popover').setContent();

更新

该setContent()方法还删除了放置类，因此您应该这样做：

var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);

演示：http: //jsfiddle.net/44RvK

于 2012-11-26T12:47:00.453 回答
77

是的，您可以，实际上尚未建议最简单的方法。

这是我的方式->

    var popover = $('#example').data('bs.popover');
    popover.options.content = "YOUR NEW TEXT";

popover 是一个对象，如果您想了解更多有关它的信息，请在定义它之后尝试执行 console.log(popover) 以查看之后如何使用它！

编辑

从 Bootstrap 4 alpha 5 开始，数据结构有点不同。你需要使用popover.config.content而不是popover.options.content

感谢@kfriend 的评论

于 2013-07-25T17:27:23.453 回答
22

在引导程序 3 中：

if($el.data('bs.popover')) {
    $el.data('bs.popover').options.content = "New text";
}
$el.popover('show');
于 2014-02-20T17:53:29.230 回答
17

2012 年的这个答案不适用于 Bootstrap 3 弹出框。我从这个问题中提取了一个可行的解决方案：

$("#popover").attr('data-content', '新内容');

于 2017-02-15T18:35:07.383 回答
10

这些解决方案中的大多数实际上对我来说似乎很老套。Bootstrap 标准文档有一个destroy可以使用的方法。因此，通过某些事件更改内容时，您可以简单地销毁然后重新创建内容。

.popover('destroy')

这会正确地动态加载、刷新和重新渲染弹出框的内容。

于 2015-01-15T02:25:47.103 回答
4

简单的解决方案

你可以试试这个：

//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");

谢谢。

于 2016-09-29T00:36:18.550 回答
3

我使用@David和@Sujay sreedhar的回答解决了这个问题，但是如果在加载新内容期间弹出框可见，则需要重新定位弹出框：

var popover = thisVal.attr('data-content',data).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($(".reply").next('div.popover:visible').length){
    // reposition
    popover.show();
}

如果它没有重新定位并且新内容具有例如不同的高度，则弹出框将向下扩展并且箭头将偏离目标！

此外，当随后单击该按钮时，它将重新打开弹出框而不是关闭它。上面的代码也解决了这个问题。

演示http://jsfiddle.net/whFv6/

（我的编辑被拒绝了，所以我想我会把它贴在这里..）

于 2013-06-06T10:49:33.953 回答
1

popover正确初始化后，可以直接使用jquery替换class="popover-content"元素：

$(".popover-content").html('a nice new content')
于 2015-02-10T15:51:21.313 回答
1

您可以将标题作为函数传递

var content = 'Loading...'

function dynamicContent(){
  return content
}
$(".reply").popover({
  content: dynamicContent,
  placement: "bottom"
});

$(".reply").popover("toggle");

然后动态更改变量内容。

于 2016-08-23T11:58:46.143 回答
1 
<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

这是一种非常干净的方式。

于 2017-12-18T17:44:14.520 回答
0

我为引导程序 3.1.1 编写了一个异步弹出窗口。我刚打电话popoverasync。这是一个演示：

异步弹出演示

您可以在此处下载演示的源代码：

演示源

对我来说，诀窍是编写getContent此异步弹出框的方法，以便调用用户检索内容的 javascript 函数，但getContent将同步返回等待动画，返回给getContent. 这样，弹出框无论哪种方式都有内容。首先，在用户等待时，最后在内容到达时。我所指的可以extensions.js在演示源中找到：

希望这对你有帮助！

担

于 2014-03-07T15:57:37.657 回答
0

HTML

<a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"><span><i class="fa fa-check"></i>algun nombre</span></a>

查询

$('a.Evaluar').on('click', function () {
    var a=$(this);//.attr('data-content', "mañana");
    $.ajax({
        url: "../IndicadorControlador?accion=BuscarPorProceso&cP=24",
        type: 'POST',
        dataType: 'json'
    })
            .done(function (response) {
                //alert("done. ");
                var ind = "";
                $(response).each(function (indice, elemento) {
                    //alert(elemento.strIdentificador);
                    //console.log('El elemento con el índice ' + indice + ' contiene ' + elemento.strIdentificador.toString());
                    ind += '<a href=#>'+elemento.strIdentificador.toString()+'</a>';
                });
              $(a).attr('data-content', ind);
            })
            .fail(function () {
                sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
            })
            .complete(function () {
            });

    $('[data-toggle="popover"]').popover();
});
于 2016-08-01T22:33:19.660 回答
0

启用弹出框后，即使数据发生更改，它也会保留其先前的版本（如果已创建）。您需要销毁以前的版本以允许再次创建新的弹出框。在 Bootstrap 4.x 中通过

.popover('dispose')

每当通过 ajax 调用发生数据更改时执行此操作。

于 2019-01-04T07:24:09.400 回答
0

对于 Boostrap v4.3

以下代码在弹出内容显示之前更新它：

// When the popover is show
$('.my-popover').on('show.bs.popover', function () {
  // Update popover content
  $(this).attr('data-content', 'New content');
})

在这个JSFiddle上在线测试。

于 2019-12-22T08:54:48.220 回答
0

bootstrap 4.6我正在使用此代码对其进行更新：

$("#disk-usage-details").attr("data-content", "your new content to here");

所有其他人都不适合我。

于 2021-03-27T08:44:58.057 回答