CODEWITHSUNDEEP
jquerytwitter-bootstrap
Karthik
Karthik

Reputation: 228

$ is undefined error in jquery

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!!

Upvotes: 9

Views: 13637

Answers (6)

brando
brando

Reputation: 8431

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.

Upvotes: 1

manny
manny

Reputation: 1948

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

Because your bootstrap-dropdown.js is running without jquery

Upvotes: 2

Alex
Alex

Reputation: 7688

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>

Upvotes: 8

Anthony Grist
Anthony Grist

Reputation: 38345

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.

Upvotes: 4

djb
djb

Reputation: 6011

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

Upvotes: 1

JJJ
JJJ

Reputation: 33163

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

Upvotes: 34

Related Questions