Twitter bootstrap js popover content doesn't update when data-content attribute is updated

Question

I'm using a popover to show some info that I'm updating after an ajax request. Basically, I am updating the data-content attribute of the element that triggers the popover on hover. I am checking the dom and the data-content stuff is definitely updating, but the content of the popover is staying the same. I've been trying everything I can think of and am starting to feel like I'm missing something simple. Can someone help me out. Hers some code:

<ul>
   <li class="player_name_li" rel="popover" data-placement="right"
    data-html="true" data-title="Dude" data-trigger="hover"
    data-content="<div class='custom_content'>Heres some content</div>" 
   data-original-title="" title=""><span class="player_name">Dude</span>
   </li>
</ul>

and then my script

$(document).ready(function(){
$('.player_name_li').popover({
     template: '<div class="popover" style="width:250px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'});

setInterval(function(){update_scores();}, 6000);

function update_scores()
{
    $.ajax({
        url: HOST_NAME,
        type: 'POST',
        //async: false,
        data: {player_array: my_data_is_generated_from_page)}
    }).done(function(results){
        var obj = $.parseJSON(results);     
        //this reloads the stupid popover data
        $.each(obj.fancy_return, function(index, value){
        $('.player_info_link').each(function(){             
            var huh = $(this).closest('li');
            huh.attr('data-content', value.new_table);
                });
        )};
}

now like I said thats all working like I expect, and updating each popover li's data-content which I verified by inspecting the dom, but when I hover over the li its still showing the old contents of data-content. I've looked through a few post and tried setting the content by function in my instanciation of the popover with content: function(){return $(this).data('content');} as well but that didn't work. I've also tried destroying and recreating each element which does work but since its in an interval function and fired automatically, it closes an open popover if you have one open which makes it seem buggy. Any ideas?

Answer 1

You are correct that the proper way to do this is to give content: function(){return someDynamicContent}, as you mentioned. The only problem I see that you might have run into is that you are perhaps unaware that $('.player_name_li').data('content') does not automatically stay in sync with manipulations of $('.player_name_li').attr('data-content'). You need to make sure that the one you change in your AJAX callback is the same one you reference in the definition of content.

If you define

$('.player_name_li')
  .popover({
    template: '<div class="popover" style="width:250px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
    content: function (){return $(this).data('content')}
  })

Then you need to use

huh.data('content', value.new_table);

If you do it this way, the plugin will do all the reinitializing behind the scenes.