$ is undefined error in jquery

Question

I am getting this error while using twitter bootstrap. I didn't get this error when using it in html. I converted it into a wordpress theme, and now i am getting this error.

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>

I am getting these errors.

1. "$ is undefined" on bootstrap-dropdown.js line 72.
2. "$(".dropdown-toggle").dropdown is not a function"

any help is much appreciated. thanks.

edit: i tried this https://stackoverflow.com/a/9301017/759257

and included the latest jquery version 1.7.1 and now it works!!

Answer 1

You're loading the scripts in the wrong order. Load jQuery first, otherwise it won't be available for the bootstrap script.

Answer 2

You're not setting it in the right order:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown();
</script>

Answer 3

I assume the "bootstrap-dropdown.js" file is a jQuery plugin. If that's the case, you need to load jQuery first, so switch your <script> tags around.