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?

Solution 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

Solution 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

Solution 3

In bootstrap 3:

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

Solution 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');

Solution 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.

View more solutions