20

New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.

I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.

For example, the popover seems to work if I manually add this directly to my HTML document:

<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>

But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:

 echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";

... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!

This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.

$(function (){
$("[rel=popover]").popover({placement:'left'});
});

I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!

UPDATE:

Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!

Community
  • 1
  • 1
ryzh
  • 263
  • 1
  • 3
  • 11

3 Answers3

18

You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.

UPDATE

If you are using jQuery

$(element_selector)
  // load results into HTML of element_selector
  .load('your/php/file')
  // when done, initialize popovers
  .done(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

OR a catch all for jQuery ajax requests

$.ajaxComplete(function(){
    $("[rel=popover]").popover({placement:'left'});
  });
nickaknudson
  • 4,769
  • 2
  • 15
  • 16
  • 1
    Yes, but I think that was assumed because he calls `$("[rel=popover]").popover({placement:'left'});` – nickaknudson Aug 14 '12 at 07:15
  • It worked! You were right, my function was being called prior to the generated elements were in the DOM. Thank you SO much for the help, it also taught me in the process. Now it works flawlessly. I'd vote you up if I could! xD – ryzh Aug 14 '12 at 07:18
  • You can always mark the correct answer to your own questions. Welcome to StackOverflow! – nickaknudson Aug 14 '12 at 07:21
  • 1
    Done! Thank you so much! I'd been lurking on StackOverflow for the longest time, and I had always found solutions to all of my problems until now... I thought that it had finally failed me, but I was wrong! :D – ryzh Aug 14 '12 at 07:23
  • 1
    I mean, I'm assuming he's using jQuery because all the Bootstrap JS files depend on it – Adam Lynch Aug 14 '12 at 09:51
  • This code work for me: `$.ajaxComplete(function(){ $("[rel=popover]").popover({placement:'left'}); });` Instead of $.ajaxComplet I have used it as: `$(document).ajaxComplete(function(){ $("[rel=popover]").popover({placement:'left'}); });` – israr May 04 '16 at 13:34
2

In the success function of the ajax you need to call the popover. Something like this

success:function(){
  $("[rel=popover]").popover({placement:'left'});
}
Nick
  • 1,799
  • 3
  • 23
  • 32
  • Thank you! Yes, I realized that my function was being called prior to the generated elements were in the DOM. Thank you SO much for the help, it also taught me in the process! – ryzh Aug 14 '12 at 07:18
0

This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put * 

$(function ()  
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
Hassan Ali Shahzad
  • 2,439
  • 29
  • 32