Re-Initialize jQuery after XMLHttpRequest - php

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