Aravind Aravind - 1 year ago 242
Javascript Question

Bootstrap popover content cannot changed dynamically

I use the code as follows:

content: "Loading...",
placement: "bottom"


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);
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 Source

If you grab the popover instance like this:

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

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


I found out browsing the source:

So, in your example, try:



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

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