I call the js files for bootstrap twitter library but I get the error that indicates
$("a[rel=popover]").popover is not a function
.
<script src="../../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-popover.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// second supervisor popover
$('a[rel=popover]').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
});
</script>
I call the js files for bootstrap twitter library but I get the error that indicates
$("a[rel=popover]").popover is not a function
.
<script src="../../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-popover.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// second supervisor popover
$('a[rel=popover]').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
});
</script>
- Looks like the popover library hasnt loaded correctly, you sure the url is correct? – Richard Dalton Commented Apr 23, 2012 at 10:03
-
@Bader remove all the loose bootstrap plugin scripts and just keep the
bootstrap.jsscript intact, that script file es with all of the plugins already included inside. – Andres I Perez Commented Apr 23, 2012 at 10:33 - @Bader can you post a link to your site? I'm sure that some assets might be missing. – Andres I Perez Commented Apr 23, 2012 at 12:28
2 Answers
Reset to default 2This happened to me in ASP.NET MVC 4. In my project I had a
@Scripts.Render("~/bundles/jquery")
both at the top of my page in the <head> and then again one of these little @Scripts.Render("~/bundles/jquery") suckers snuck in towards the end of the page just before the </body>. I removed the redundant line at the end of the page and the problem went away.
Note that the browser rendered the <head> in the correct order:
<script src="/Scripts/jquery-1.9.1.js">
<script src="/twitterBootstrap/js/bootstrap.js">
<script src="/Scripts/modernizr-2.5.3.js">
However, I ended up with another
<script src="/Scripts/jquery-1.9.1.js">
at the bottom of the page. This confused the browser and it confused the heck outta me too.
This works:
http://jsfiddle/9W53Q/7/
Edit: http://jsfiddle/9W53Q/272/
Make sure the resoures are being added in the right order (tooltip first). Or like Richard Dalton suggested (and I remend), just use the piled bootstrap.js file.
$(document).ready(function() {
$('a[rel=popover]').popover();
});