Question

I’m using Twitter Bootstrap’s Popover feature on a sidebar. The sidebar is fetched and reloads the content every 30 seconds. I’m suing XMLHttpRequest to reload the content of the sidebar by fetching a file called stats.php.

The following code is the “refresh” code which resides in the header of the page.

function onIndexLoad()
{
    setInterval(onTimerCallback, 30000);
}

function onTimerCallback()
{
  var request = new XMLHttpRequest();
  request.onreadystatechange = function()
  {
      if (request.readyState == 4 && request.status == 200)
      {
          document.getElementById("stats").style.opacity = 0;
          setTimeout(function() {
              document.getElementById("stats").innerHTML = request.responseText;
                document.getElementById("stats").style.opacity = 100;
              }, 1000);
      }
  }
  request.open("GET", "stats.php", true);
  request.send();
}

The above code works flawlessly, however, after it reloads the #stats div, the popover no long does what it’s supposed to – popup.

The popover code is in the stats.php in a foreach() loop because I have multiple popover scripts I need because there are multiple popovers on the sidebar.

Here’s my popover code:

$(document).ready(function() {
  $('a[rel=popover_$id]').popover({
        placement:'right',
        title:'$title',
        content: $('#popover_content_$id').html()
  });
});

The $id and $title are dynamic as they are pulled from the foreach() loop.

How can I fix it so after the div reloads, the popover function will reinitialize?

---

$("a[rel=popover_controller_$cid]").on({
    mouseenter: function () {
        $('a[rel=popover_$id]').popover({
                placement:'right',
                title:'$title',
                content: $('#popover_content_$id').html()
        });
    }
});

I have also tried:

$("a[rel=popover_controller_$cid]").on("mouseover", function () {
    $('a[rel=popover_$id]').popover({
            placement:'right',
            title:'$title',
            content: $('#popover_content_$id').html()
    });
});

Answer 1

.live is depreciated. use .on delegation

try something like this:

$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
        $('a[rel=popover_$id]').popover({
                placement:'right',
                title:'$title',
                content: $('#popover_content_$id').html()
        });

});

This delegates the mouseenter event from #stats to a[rel=popover_controller_$cid] and because the event is delegated it will still fire when #stats contents are replaced.

be careful – you will keep initializing popover on each mouseover. that might be bad.

while you are at it – you should use jquery’s ajax instead of native xhr. its easier and more cross browser.

$.get('stats.php', function(d){
    $('#stats').html(d);
};

—

setInterval(function(){
    $.get('stats.php', function(data) {
        $('#stats').html(data);
    });
}, 30000);