Bootstrap Popover error: undefined is not a function

Question

I'm dealing with a problem that obviously a lot of people run into considering the amount of articles I've read and tried. However, none of these helped me actually solve the problem so I hope someone here has solution for this, I guess, simple problem.

For a Magento 1.8 installation I have developed a category grid that automatically renders a 3 column category layout based upon the main category. Then I implemented the Bootstrap Popover functionality accordingly:

• Added jQuery.min.js
• Added the Bootstrap.min.js

And used the following code to use in my grid:

 <script>
     jQuery(document).ready(function($){
     $('[data-toggle="popover"]').popover({ 
         trigger: 'manual',
         animate: false,
         html: true,
         template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
      }).click(function(e) {
      e.preventDefault() ;
      }).mouseenter(function(e) {
      $(this).popover('show');  
      }) 
 });
 </script>

I developed this on a dev site and everything worked perfectly. I then tried to implement this into my live site and ran into problems. I'm stuck at the following error:

TypeError: undefined is not a function (evaluating 'jQuery('[data-toggle="popover"]').popover()')

As you can see I already switched my code from using $ to jQuery in order to avoid any possible jQuery conflicts. However I'm still getting this error. I've also deleted another jQuery library that was being called upon but this also did not solve it.

I currently have a about half of my hair left since I get the feeling I'm overlooking a minor detail to solve this issue.

Answer 1

The solution for the problem was actually pretty simple and I used a bit of a shortcut since I was running low on time. Simply moving the Popover jQuery code into my .phtml file made the error go away and made everything working.

I advise to see how your JQuery file is being called upon within Magento. Might be that you've added it to a local.xml file that is actually rendered after JQuery itself is called. Look at your source code to find out and make the appropriate changes.