Bootstrap popover content cannot changed dynamically

Question

I use the code as follows:

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

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

Answer 1

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