Uncaught ReferenceError: $ is not defined error in jQuery

Question

I have this code in jQuery: (the file name is javascript.js ...I was using JavaScript before...)

$(document).ready(function() {
 $("#readFile").click(function() {
    $.get('test.txt', function(data) {
      $("#bottom_pane_options").html(data); // #bottom_pane_options is the div I want the data to go
    }, 'text');
 });
});

...and this in HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="./javascript.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


    <script>
        function initialize()
        {
        var mapProp = {
          center:new google.maps.LatLng(50.569283,-84.378433),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.TERRAIN
          };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button id="readFile">Read File</button>
        </div>
    </div>
</body>

When I check the console, I get the Uncaught ReferenceError saying that $ is not defined on the first line. I'm assuming that it is referring to the first character on the first line. I got this code from a website and I'm new to jQuery so I'm not sure what is going wrong here.

Any suggestions?

Try to add your own code script at end of your html content, before your closing
tag to avoid this like `$ is not defined` Error's. And add other pre-defined Jquery or some other library in top
tag. your order should be - `

` and inside the body `

` — Vignesh Chinnaiyan, Jun 06 '16 at 07:11
Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Moradnejad, Jun 18 '19 at 10:59

score 43 · Accepted Answer · edited Aug 12 '16 at 13:55

43

Change the order you're including your scripts (jQuery first):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIKEY&sensor=false">
</script>

edited Aug 12 '16 at 13:55

DInesh AG

316
4
20

answered Jan 17 '14 at 16:14

j08691

204,283
31
260
272

Thanks. Your answer got rid of the problem. But now I am getting an error saying that I am missing the `Access-Control-Allow-Origin` header. I know I need to add `Allow-Control-Access-Origin: *` but I'm not sure **where** to put it. – user3015565 Jan 17 '14 at 17:56

score 7 · Answer 2 · answered Jan 17 '14 at 16:15

Include the jQuery file first:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript" src="./javascript.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>

score 7 · Answer 3 · answered Jan 17 '14 at 16:19

7

Scripts are loaded in the order you have defined them in the HTML.

Therefore if you first load:

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

without loading jQuery first, then $ is not defined.

You need to first load jQuery so that you can use it.

I would also recommend placing your scripts at the bottom of your HTML for performance reasons.

answered Jan 17 '14 at 16:19

MMM

7,221
2
24
42

...loaded and interpreted in order. the OP's assumption seems to be that they are interpreted only after all of them are loaded. – akonsu Jan 17 '14 at 16:55

score 2 · Answer 4 · answered Nov 01 '15 at 07:50

The MVC 5 stock install puts javascript references in the _Layout.cshtml file that is shared in all pages. So the javascript files were below the main content and document.ready function where all my $'s were.

BOTTOM PART OF _Layout.cshtml:

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

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

</body>
</html>

I moved them above the @RenderBody() and all was fine.

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

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

</body>
</html>

Uncaught ReferenceError: $ is not defined error in jQuery

4 Answers4

Linked

Related