bootstrap popover: reload content with ajax

Question

I'm having trouble reloading content of a bootstrap popover with ajax. Here's some code: http://pastie.org/3960102

The second ajax request (when I click on "a.close") returns an updated content (I can see it in the console), but it is not loaded inside the popover.

I looked around for solutions, none of them seem to work.

What else can I try? Thank you

Answer 1

Instead of resetting the data-content attribute, you are able to directly access the popover tooltip content.

Replace the following line:

t.attr('data-content', r);

with this working code:

t.data('popover').tip().html(r);

Update 2012

As Pigueiras pointed out in his comment, that would destroy the default template for the popover. A better solution is to replace the contents of .popover-content:

t.data('popover').tip().find('.popover-content').empty().append(r);

Update 2016

Thanks to another comment, here is the working code for Bootstrap 3:

t.data('bs.popover').tip().find('.popover-content').empty().append(r);

Answer 2

Why empty() and then append() when you can just replace?

t.data('popover').tip().find('.popover-content').html(r);

EDIT:

Also, the first approach is correct and works fine (bootstrap 2.1) when popover is already initialized and you want to change the contents on the fly. You just have to call 'show' again for the popover to refresh (content and position):

t.attr('data-content', r);
t.popover('show');

Answer 3

After hours' search, I figured it out. For Bootstrap 3, you can use code below. More references are: https://github.com/twbs/bootstrap/issues/11528 and Bootstrap popover content cannot changed dynamically if($element.data('bs.popover')) { $element.data('bs.popover').options.content = 'NEW CONTENT'; }