JQuery – $ is not defined

JQuery – $ is not defined

I have a simple jquery click event

and a jquery reference defined in the site.master

I have checked that the script is being resolved correctly, I’m able to see the markup and view the script directly in firebug, so I must be being found. However, I am still getting:

$ is not defined

and none of the jquery works. I’ve also tried the various variations of this like $(document).ready and jQuery etc.
It’s an MVC 2 app on .net 3.5, I’m sure I’m being really dense, everywhere on google says to check the file is referenced correctly, which I have checked and checked again, please advise! :/

Solutions/Answers:

Solution 1:

That error can only be caused by one of three things:

  1. Your JavaScript file is not being properly loaded into your page
  2. You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
  3. You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

You should check the Firebug net panel to see if the file is actually being loaded properly. If not, it will be highlighted red and will say “404” beside it. If the file is loading properly, that means that the issue is number 2.

Make sure all jQuery javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});

This will ensure that your code is being loaded after jQuery has been initialized.

One final thing to check is to make sure that you are not loading any plugins before you load jQuery. Plugins extend the “$” object, so if you load a plugin before loading jQuery core, then you’ll get the error you described.

Note: If you’re loading code which does not require jQuery to run it does not need to be placed inside the jQuery ready handler. That code may be separated using document.readyState.

Solution 2:

It could be that you have your script tag called before the jquery script is called.

<script type="text/javascript" src="js/script.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

This results as $ is not defined

Put the jquery.js before your script tag and it will work 😉 like so:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js"></script>

Solution 3:

First you need to make sure that jQuery script is loaded. This could be from a CDN or local on your website. If you don’t load this first before trying to use jQuery it will tell you that jQuery is not defined.

<script src="jquery.min.js"></script>

This could be in the HEAD or in the footer of the page, just make sure you load it before you try to call any other jQuery stuff.

Then you need to use one of the two solutions below

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery); 

or

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

please be aware that many times $(document).ready(function(){//code here}); will not work.

Solution 4:

If the jQuery plugin call is next to the </body>, and your script is loaded before that, you should make your code run after window.onload event, like this:

window.onload = function() {
  //YOUR JQUERY CODE
}

`

so, your code will run only after the window load, when all assets have been loaded. In that point, the jQuery ($) will be defined.

If you use that:

$(document).ready(function () {
  //YOUR JQUERY CODE
});

`

the $ isn’t yet defined at this time, because it is called before the jQuery is loaded, and your script will fail on that first line on console.

Solution 5:

I just did the same thing and found i had a whole lot of

type="text/javacsript"

So they were loading, but no further hint as to why it wasn’t working. Needless to say, proper spelling fixed it.

Solution 6:

Use a scripts section in the view and master layout.

Put all your scripts defined in your view inside a Scripts section of the view. This way you can have the master layout load this after all other scripts have been loaded. This is the default setup when starting a new MVC5 web project. Not sure about earlier versions.

Views/Foo/MyView.cshtml:

// The rest of your view code above here.

@section Scripts 
{ 
    // Either render the bundle defined with same name in BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...or hard code the HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {

        // Do your custom javascript for this view here. Will be run after 
        // loading all the other scripts.            
      });
    </script>
}

Views/Shared/_Layout.cshtml

<html>
<body>
    <!-- ... Rest of your layout file here ... -->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Note how the scripts section is rendered last in the master layout file.