Binoy asked this 3 years ago

popover is not a function error

I have a form that use popovers..  and i have the following code inside document ready

$(document).ready(function() {


 $('[data-toggle="popover"]').popover();



});

when the form is loaded i see the following errors in console.

jquery-3.1.1.min.js:2 jQuery.Deferred exception: $(...).popover is not a function TypeError: $(...).popover is not a function
    at HTMLDocument.<anonymous> ..... ..... undefinedr.Deferred.exceptionHook @ jquery-3.1.1.min.js:2
jquery-3.1.1.min.js:2 Uncaught TypeError: $(...).popover is not a function(…)


Best Answer by pseudoFish
10 likes

Its either duplicate instance of jQuery or namespace clash with some other library.

Check for duplicate insance of jQuery and remove.

If that doesn't solve the issue, then it could be namespace conflict with some other library. 

The jQuery library uses $ as a shortcut for jQuery. If some other JavaScript library use $ variable, you can run into conflict. To avoid this put jQuery into no-conflict mode immediately after it is loaded.

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>

<script>
// $j optional alias to jQuery noConflict()
var $j = jQuery.noConflict();

$j(document).ready(function() {
	$j('[data-toggle="popover"]').popover();
});
</script>
pseudoFish 3 years ago
10 likes

Check if you have multiple jquery instances running on the page, check for duplicate inclusion of same library.

 

Vikas 2 years ago
3 likes

What version of jQuery are you using? In what order are you importing the libraries jQuery and Bootstrap? 

ben100 2 years ago
3 likes
jsRant 2 years ago
2 likes

I had this issue. Then i discovered i was including the library twice, once in header and once in footer in my template. Removed the duplicate and problem solved.