Categories
asp.net-mvc javascript jquery

JQuery – $ is not defined

556

I have a simple jquery click event

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

and a jquery reference defined in the site.master

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

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

11

  • 6

    Do you actually see the jquery-1.3.2.js asked for and loaded with HTTP200 response code, if you inspect the page load with Fiddler tool?

    – naivists

    Feb 3, 2010 at 19:59


  • 24

    is your script executing before jquery?

    – Surya

    Feb 3, 2010 at 20:00

  • 2

    Can you view source and click on js link. Seems like your jquery is not loaded on page. Try Firebug Console Screen to See errors Try also ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js in your script tag

    – nemke

    Feb 3, 2010 at 20:01


  • 2

    Is your script firing before the jquery source is loaded?

    Feb 3, 2010 at 20:02

  • 1

    @Surya/Dave, i’ve gone home now, so i’ll check it out again tomorrow, and come back and post, but i think that probably the issue, :/ how embarassing!

    Feb 3, 2010 at 20:21


640

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.

First of all, ensure, what script is call properly, it should looks like

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

and shouldn’t have attributes async or defer.

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

10

  • 205

    Regarding your code block, $(document) won’t work either unless you have a script tag including jQuery before that statement…

    Dec 7, 2010 at 15:07

  • 3

    I would like to add that I had the same issue as the OP and my problem was that using https with jquery’s library doesn’t work so well.

    Oct 20, 2011 at 13:36

  • 21

    (function($){ })(jQuery);

    Apr 4, 2013 at 4:40


  • 2

    @Patrik: See my answer for a solution using a scripts section in the view. This way jquery will be loaded first and $ is properly defined.

    Dec 3, 2013 at 15:01

  • 1

    Check if you have async on the script as well, thats what caused the problem in my case.

    – Anders

    Jan 3, 2017 at 13:56

226

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

<script type="text/javascript" src="https://stackoverflow.com/questions/2194992/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="https://stackoverflow.com/questions/2194992/js/script.js"></script>

5

  • 1

    This is a great response. I tried it and it worked for me. I’m using VS 2013 and ASP.net. Do you know how I can make javascript load before the page loads automatically in asp.net or do I have to reference javascript this way in all my files?

    – Pat

    May 22, 2015 at 21:42


  • To add to your answer. In ASP.net you can go into Shared_Layout.cshtml ` <head> </head> `

    – Pat

    May 26, 2015 at 3:37


  • @pat and make sure you write your code inside a @section Scripts tag

    – Marc

    Aug 11, 2015 at 20:29

  • Please update answer to use HTTPS and consider use of SPI devdocs.io/html/attributes#integrity-attribute

    – vhs

    Jun 1, 2017 at 5:19

  • Thaaaaaaaaaaaaaaaaaanks! I spend almost a week (an hour aprox every night) wondering what I was doing wrong (and trying one an another fix)!! Thanks again 🙂

    Jul 16, 2021 at 3:57


82

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="https://stackoverflow.com/questions/2194992/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.

6

  • 2

    “jQuery is not defined”. It exists after page load however.

    Mar 22, 2016 at 16:52

  • Not sure if this is a question or a statement, but, I would check you make the call for the jQuery script before you try to use it. It sounds like your loading it in the footer and calling things higher up the page.

    Mar 23, 2016 at 15:02

  • Sorry, I thought this was a technique that you could use the scripts in any order. Yes I was using this in the body section in the MVC style. mycode.js then jQuery.js are the last 2 things on the page.

    Mar 23, 2016 at 17:00

  • No worries Paul, I’ve edited the solution to include ‘you must… load first’. 🙂

    Mar 24, 2016 at 7:31

  • Does this fix the problem of “My scripts are in the right order but the scripts are loaded in a different order”. I remember doing something like this at 4 years ago but I can’t remember what problem it solved.

    Mar 24, 2016 at 12:36