Bootstrap Multiple Popover – Loading Content via Ajax TypeError-Collection of common programming errors

I have several popovers (on a tags) that make ajax calls to populate their data-content. I’m using the following code to make the call:

$(document).ready(function() {
    $('.withajaxpopover').bind('hover',function(){
        var el=$(this);

        $.ajax({
            type: "GET",
            url: el.attr("data-url"),
            data: el.attr("alt"),
            dataType: "html",
            success: function(data) {
                el.attr("data-content", data);
            }
        });

        console.log(el.attr("data-content"));
        el.popover('show');
    });
});

and then making calls like this:

blabla

  
hahahaha

When I hover over one link, the popover comes up correctly, however after one popover has displayed, I get the following error when I hover on any other popovers:

Uncaught TypeError: Object [object Object] has no method 'popover' 

When I look at the console, for all subsequent hovers the ajax is returning the correct data, but the popover just isn’t appearing. Any ideas what I’m doing wrong?

1. I ended up having to use a whole other extension to accomplish what I needed. See: http://designwithpc.com/Plugins/Hovercard has much better ajax support and hover capabilities then bootstrap popover. And the js is very easy to modify to accommodate any specific needs. Highly recommended.

2. Try this:

   $(document).ready(function() {
       $('.withajaxpopover').bind('hover',function(){
           var el=$(this);
   
           $.ajax({
               type: "GET",
               url: el.attr("data-url"),
               data: el.attr("alt"),
               dataType: "html",
               success: function(data) {
                   el.attr("data-content", data);
                   el.popover('show'); 
               }
           });
       });
   });
   

Originally posted 2013-11-15 09:08:17.