{"id":1389,"date":"2022-08-30T15:16:07","date_gmt":"2022-08-30T15:16:07","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/bootstrap-multiple-popover-loading-content-via-ajax-typeerror-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:07","modified_gmt":"2022-08-30T15:16:07","slug":"bootstrap-multiple-popover-loading-content-via-ajax-typeerror-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/bootstrap-multiple-popover-loading-content-via-ajax-typeerror-collection-of-common-programming-errors\/","title":{"rendered":"Bootstrap Multiple Popover &#8211; Loading Content via Ajax TypeError-Collection of common programming errors"},"content":{"rendered":"<p>I have several popovers (on a tags) that make ajax calls to populate their data-content. I&#8217;m using the following code to make the call:<\/p>\n<pre><code>\n$(document).ready(function() {\n    $('.withajaxpopover').bind('hover',function(){\n        var el=$(this);\n\n        $.ajax({\n            type: \"GET\",\n            url: el.attr(\"data-url\"),\n            data: el.attr(\"alt\"),\n            dataType: \"html\",\n            success: function(data) {\n                el.attr(\"data-content\", data);\n            }\n        });\n\n        console.log(el.attr(\"data-content\"));\n        el.popover('show');\n    });\n});\n\n<\/code><\/pre>\n<p>and then making calls like this:<\/p>\n<pre><code>blabla<br \/><br \/>  \nhahahaha\n<\/code><\/pre>\n<p>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:<\/p>\n<pre><code>Uncaught TypeError: Object [object Object] has no method 'popover' \n<\/code><\/pre>\n<p>When I look at the console, for all subsequent hovers the ajax is returning the correct data, but the popover just isn&#8217;t appearing. Any ideas what I&#8217;m doing wrong?<\/p>\n<ol>\n<li>\n<p>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.<\/p>\n<\/li>\n<li>\n<p>Try this:<\/p>\n<pre><code>$(document).ready(function() {\n    $('.withajaxpopover').bind('hover',function(){\n        var el=$(this);\n\n        $.ajax({\n            type: \"GET\",\n            url: el.attr(\"data-url\"),\n            data: el.attr(\"alt\"),\n            dataType: \"html\",\n            success: function(data) {\n                el.attr(\"data-content\", data);\n                el.popover('show'); \n            }\n        });\n    });\n});\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-15 09:08:17. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I have several popovers (on a tags) that make ajax calls to populate their data-content. I&#8217;m using the following code to make the call: $(document).ready(function() { $(&#8216;.withajaxpopover&#8217;).bind(&#8216;hover&#8217;,function(){ var el=$(this); $.ajax({ type: &#8220;GET&#8221;, url: el.attr(&#8220;data-url&#8221;), data: el.attr(&#8220;alt&#8221;), dataType: &#8220;html&#8221;, success: function(data) { el.attr(&#8220;data-content&#8221;, data); } }); console.log(el.attr(&#8220;data-content&#8221;)); el.popover(&#8216;show&#8217;); }); }); and then making calls like this: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1389","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1389"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1389\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}