Bootstrap popover is not a function
I am currently trying to develop a Chrome plugin that has spots of different names appearing inside every web page I visit.
When the plugin finds a name, it basically adds an icon next to it. When you click, bootstrap appears with additional information about the person.
When I try to run my code, I get this error:
VM887: 1 Uncaught TypeError: $ (...). popover is not a function (...)
Here is my code:
$('head').append('<script async src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>\
<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>');
$(document).ready(function(){
var name = "Nicolas";
// console.log('Document is ready.. scanning for politicians...');
//var hashmap = db_reader.getHashMap();
var counter = {i: 0}; //Occurences. Singleton to be passed by reference and not by value.
$('p').each(function(index) {
addImage(this, counter);
});
$('li').each(function(index) {
addImage(this, counter)
});
$('head').append(
"<script>$(function(){$('[data-toggle=\"popover\"]').popover();});\
</script>"
);
});
function addImage(context, counter) {
var body = $(context).text();
var word;
var reg = /[A-Z]+[a-z]*/gm;
while(word = reg.exec(body)){
// console.log("while");
if(word == name){
// console.log(word);
var image = '<a href="#" data-toggle="popover" title="Popover Header" data-content="A wonderful content" id="popover'+counter.i+'" class="politicianFind">\
<img alt="name" src="https://s15.postimg.org/pei4ci3fv/fdp.png">\
</a>';
// console.log("Replacing HTML");
$(context).html(body.replace(word, word + " " + image));
counter.i++;
}
}
}
I've searched many times already, but I couldn't find a fix for this problem.
Respectfully,
Florian
source to share
I think this is because when you call the popover
bootstrap method the script is not loaded yet.
You have 2 options:
- To call a method on
$(window).load
- http://output.jsbin.com/qoteqe - Include bootstrap and jQuery references in the DOM and don't load them in the script: http://output.jsbin.com/tamoda
BTW why are you adding another jQuery link? If you are using $('head').append
, you already have jQuery in your page. Is not it so?
source to share