$ 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.

Answer 4

first call jquery.min.js then your bootstrap-dropdown.js

Because your bootstrap-dropdown.js is running without jquery

Answer 5

Also, when you use JQ in Wordpress you should wrap your code in

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

Further reading

Answer 6

I had this exact same problem. I was originally, basically, front loading all my javascript files, including bootstrap, into one mega-bundle as follows:

    bundles.Add(New ScriptBundle("~/bundles/jquery-etc").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-ui-{version}.js",
                "~/Scripts/bootstrap.js",
                "~/Scripts/respond.js",
                [other js files here]))

I was thinking that bootstrap was loading AFTER jquery so it should be ok. Nope. So I put bootstrap into a separate bundle as follows:

         bundles.Add(New ScriptBundle("~/bundles/jquery-etc").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-ui-{version}.js",
                [other js files here]))


          bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/respond.js"))

This caused bootstrap to load property AFTER Jquery. Probably djb's solution would have done the job too. But this worked for me.