Bootstrap popover content cannot changed dynamically

Question

I use the code as follows:

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

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

which creates the popover and its content correctly. I want to load a new data into the popover without closing the popover.

I've tried the following:

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

After this call the data in the element is changed but not in the popover which is shown.

How should i do this?

Answer 1

If you grab the popover instance like this:

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

Then, to redraw the popover, use the .setContent() method:

popover.setContent();

I found out browsing the source: https://github.com/twitter/bootstrap/blob/master/js/popover.js

So, in your example, try:

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

Update

The setContent() method also removes the placement class, so you should do:

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

Demo: http://jsfiddle.net/44RvK

Answer 2

Yes you can, in fact the easiest way haven't been suggested yet.

Here's my way ->

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

popover is an object if you want to know more about it, try to do console.log(popover) after you define it to see how you can use it after !

EDIT

As of Bootstrap 4 alpha 5, the data structure is a bit different. You'll need to use popover.config.content instead of popover.options.content

Thanks to @kfriend for the comment

Answer 3

In bootstrap 3:

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

Answer 4

This answer from 2012 does not work with Bootstrap 3 popovers. I extracted a working solution from this question:

$("#popover").attr('data-content', 'new content');

Answer 5

Most of these solutions actually seem hacky to me. Bootstrap standard docs have a method destroy that can be used. So, on change of content via some event you can simply destroy and then recreate content.

.popover('destroy')

This properly dynamically loads, refreshes and re-renders the content of the popover.

Answer 6

SIMPLE SOLUTION

You can try with this :

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

Thanks.

Answer 7

I solved the problem using @David and @Sujay sreedhar's answer, but if the popover is visible during the new content is loaded, the popover needs to be repositioned:

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

If it is not repositioned and the new content has e.g. a different height, the popover will expand downwards and the arrow will be off target!

Also, when the button is clicked afterwards it will re-open the popover instead of closing it. The above code solves, that problem too.

Demo http://jsfiddle.net/whFv6/

(My edit was rejected, so I thought I'd post it here..)

Answer 8

After the popover has been correctly initialized, you can directly use jquery to replace the class="popover-content" element:

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

Answer 9

you can just pass the title as function

var content = 'Loading...'

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

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

and then change the variable content dynamically.

Answer 10

<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

This is a very clean way.

Answer 11

I wrote an async popover for bootstrap 3.1.1. I just called it popoverasync. Here is a demonstration:

async popover demo

You can download the source of the demo here:

demo source

The trick, for me, was to write the getContent method of this async popover so the user's javascript function to retrieve the content will be invoked, but getContent will return a wait animation, synchronously, back to the caller of getContent. This way, the popover has content either way. First, while the user waits, and finally when the content arrives. What I am referring to can be found within extensions.js in the demo source:

Hope this helps you!

Dan

Answer 12

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

Answer 13

When a popover is enabled, it retains its previous version(if it was created already) even if the data is change. You need to destroy the previous version to allow for the new popover to be created again. In Bootstrap 4.x do it by

.popover('dispose')

do it whenever there is a change in data through an ajax call.