JQuery - $ is not defined

user_220299 0
Viewed 2054598

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

asp.net-mvc jquery javascript
36 Answers

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.

user_1176030

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.

user_1347610
user_2585480

I had the same problem and resolved it by using

document.addEventListener('DOMContentLoaded', () => {
 // code here
});
user_33257130

I use Url.Content and never have a problem.

<script src="<%= Url.Content ("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
user_978450

In the solution it is mentioned - "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."

For avoiding this -

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

Admin1

This is the common issue to resolve this you have to check some point

  1. Include Main Jquery Library
  2. Check Cross-Browser Issue
  3. Add Library on TOP of the jquery code
  4. Check CDNs might be blocked.

Full details are given in this blog click here

user_107287980

We have the same problem....but accidentally i checked folder properties and set something...

You have to check the properties of each folders that you're accessing..

  1. right click folder
  2. 'permissions' tab
  3. set the folder access : OWNER: create and delete files GROUP: access files OTHERS: access files

I hope that this is the solution......

user_12685080

if script tag has defer attribute it show the error

Uncaught ReferenceError: $ is not defined

and must remove the attribute defer from script tag

user_78711000

Something that I didn't find here, but did happen to me. Make sure you don't have the jQuery slim version included, as that version of the jQuery library doesn't include the Ajax functionality.

The result is that "$" works, but $.get for example returns an error message stating that that function is undefined.

Solution: include the full version of jQuery instead.

user_16829240

I came across same issue, and it resolved by below steps. The sequence of the scripts should be as per mentioned below

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

This sequence was not correct for my code, I corrected this as per the above and it resolved my issue of Jquery not defined.

user_112943120

I was having the same issue and now I have it resolved. My environment is as below;

Laravel with Blade Pages. I had a main layout and used sections to create new pages form my main page layout(template).

I was loading JQuery from my section page and not my main layout. I changed it from the section page to load JQuery from the main layout and also at the top in the head tag.

user_62692810
Related