Bootstrappopup窗口内容不能dynamic改变

我使用的代码如下:

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

从而正确地创buildpopover和其内容。 我想在popover中加载一个新的数据而不closurespopover。

我已经尝试了以下内容:

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

在这个调用之后,元素中的数据会被更改,但不会显示在popup窗口中。

我应该怎么做?

如果你像这样抓取popover实例:

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

然后,使用.setContent()方法来重新绘制popup窗口:

 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

是的,你可以,实际上最简单的方法还没有被build议。

这是我的方式 – >

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

popup窗口是一个对象,如果你想知道更多关于它,尝试做console.log(popover)后,你定义它,看看你可以使用它后!

编辑

至于Bootstrap 4 alpha 5,数据结构有些不同。 你将需要使用popover.config.content而不是popover.options.content

感谢@kfriend的评论

在bootstrap 3中:

 if($el.data('bs.popover')) { $el.data('bs.popover').options.content = "New text"; } $el.popover('show'); 

这些解决scheme中的大部分对我来说实际上似乎很难受。 Bootstrap标准文档有一个可以使用的方法destroy 。 所以,通过某些事件改变内容,你可以简单地销毁,然后重新创build内容。

 .popover('destroy') 

这适当地dynamic加载,刷新和重新渲染popover的内容。

从2012年的这个答案不适用于Bootstrap 3 popovers。 我从这个问题提取了一个工作解决scheme:

$(“#popover”)。attr('data-content','new content');

我使用@David和@Sujay sreedhar的答案解决了这个问题,但是如果在加载新内容期间popup窗口是可见的,则需要重新定位popup窗口:

 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(); } 

如果没有重新定位并且新的内容具有不同的高度,则popup窗口将向下扩展,并且箭头将脱离目标!

另外,当button被点击后,它将重新打开popover而不是closures它。 上面的代码解决了这个问题。

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

(我的编辑被拒绝了,所以我想我会在这里张贴..)

简单的解决scheme

你可以试试这个:

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

谢谢。

popover被正确的初始化之后,你可以直接使用jquery来replaceclass="popover-content"元素:

 $(".popover-content").html('a nice new content') 

你可以传递标题的function

 var content = 'Loading...' function dynamicContent(){ return content } $(".reply").popover({ content: dynamicContent, placement: "bottom" }); $(".reply").popover("toggle"); 

然后dynamic更改variables内容。

我为bootstrap 3.1.1写了一个asynchronouspopover。 我只是把它叫做popoverasync 。 这是一个示范:

asynchronouspopover演示

你可以在这里下载演示的源代码:

演示源

对我来说,诀窍是编写这个asynchronouspopover的getContent方法,以便调用用户的javascript函数来检索内容,但getContent将同步返回一个等待animation,返回给getContent的调用者。 这样,popover有内容的方式。 首先,用户等待,最后到达内容。 我所指的可以在extensions.js中的演示源中find:

希望这可以帮助你!

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> 

JQUERY

 $('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(); });