Uncaught ReferenceError: $ is not defined

Question

I am getting this error message when trying to create a JQuery image slider.

Uncaught ReferenceError:$ is not defined

Here is my NEW coding (NOTE that I have moved the script to the of the page, this was suggested by adobe.) :

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Green Cold-Formed Steel | Home</title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    color: #000;
    text-align: left;
}
body {
    background-color: #999;
}
a:link {
    color: #999;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #060;
}
a:hover {
    text-decoration: underline;
    color: #FFF;
}
a:active {
    text-decoration: none;
}
h1 {
    font-size: 14px;
    color: #060;
}
h2 {
    font-size: 12px;
    color: #999;
}
h3 {
    font-size: 9px;
    color: #FFF;
}
#next {
    background-image: url(Assets/slideshow/r_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slideshowwrapper {
    display: block;
    height: 500px;
    width: 1000px;
    margin: auto;
}
#container {
    background-color: #FFC;
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: auto;
}
#prev {
    background-image: url(Assets/slideshow/L_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 100px;
    position: relative;
    z-index: 99;
}
#slider {
    display: block;
    float: left;
    height: 500px;
    width: 1000px;
    overflow: hidden;
    position: absolute;
}
#NavBar {
    display: block;
    height: 50px;
    width: auto;
    position: relative;
    padding-bottom: 5px;
    float: none;
    vertical-align: middle;
}
</style>
</head>

<body bgcolor="#999999" text="#000000">

<table width="100%" height="583" border="0" cellspacing="0" cellpadding="0px">
  <tr>
    <th height="132" align="left" scope="col">&nbsp;</th>
    <th scope="col"><div class="spacer" id="spacer"></div>
      <div class="Header" id="header"><a href="index.html"><img src="Assets/Logo/GFCS_Logo_NoBckgnd.png" width="288" height="108" alt="GCFS"></a></div>
    <hr></th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="5%" align="left" scope="col">&nbsp;</th>
    <td width="85%" align="left" valign="top" scope="col">
    <div class="Navigation Bar" id="NavBar"><img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Home"> <img src="Assets/navigation/navbutton_static_green.png" width="100" height="50" alt="Navi_Solutions"> <img src="Assets/navigation/navbutton_down.png" width="100" height="50" alt="navi_down"></div>

    <div id="slideshowwrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
            <img src="Assets/slideshow/hyatt_apts.png" width="1000" height="500" alt=           "Hyatt Apartments">
            <img src="Assets/slideshow/mccommas.png" width="1000" height="500" alt="McCommas">
            <img src="Assets/slideshow/park_4200.png" width="1000" height="500" alt="Park 4200">
            <img src="Assets/slideshow/quail_run.png" width="1000" height="500" alt="Quail Run">
            <img src="Assets/slideshow/roofdale.png" width="1000" height="500" alt="Roofdale Roof">
            <img src="Assets/slideshow/tri_truss.png" width="1000" height="500"> </div>
        <div class="controller" id="next"></div>
      </div>
    </div></td>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<script type="text/javascript" src="JS/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle.all.js"></script>
<script>
$(function(){
        $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });
});
</script>
</body>
</html>

My folder path to the JS folder for my website (locally) looks like this: C:\Users\Andrew\Desktop\GCFS\JS

I am new to the coding world, but what I am trying to achieve is fairly simple. As far as I know I do not need to have a ready function and the javascript should run automatically. Thank you for your assistance!

From comment

When I tried this it also failed

<title>Green Cold-Formed Steel | Home</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="JS/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
 $(function() {  
   $('#slider').cycle({ fx: 'scrollHorz', speed: 'fast', next: '#next', prev: '#prev' });
}); 
</script>

yes, I am using Dreamweaver to create this Site, so the file was essentially "linked" and the code was written for me. — MasterFuel, Jun 11 '13 at 18:07
(1) Learn how to use the [Network Panel](https://developers.google.com/chrome-developer-tools/docs/network) so you can see if there is an error requesting `jquery-1.10.1.min.js`. (2) Learn how to use the [Console](https://developers.google.com/chrome-developer-tools/docs/console) so you can follow Rag's advice. This site can't help you unless you learn to help yourself :) — benastan, Jun 11 '13 at 18:19
Clear your browser cache and follow @Sushanth --'s advice..It will work !! — writeToBhuwan, Jun 11 '13 at 18:28
also review this answer http://stackoverflow.com/questions/21190580/uncaught-referenceerror-is-not-defined-error-in-jquery — Aaska Patel, Mar 13 '15 at 10: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:58

writeToBhuwan · Accepted Answer · 2013-06-11T19:10:44.233

The solution:

1) Use Google CDN to load jQuery

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

2) As far as I know about the Cycle Plugin, It is compatible with jQuery v1.5-v1.7 because most of the methods were deprecated in jQuery 1.8+ . This is the reason I've used v1.5 of Google CDN jquery in point 1. Most of the examples on cycle plugin use jquery 1.5.

3) Clear Your browser cache, It is the main culprit most of the times.

4) PLease check the loading of jquery using the code below

if(typeof jQuery!=='undefined'){
    console.log('jQuery Loaded');
}
else{
    console.log('not loaded yet');
}

Major Edit:

The reason for the error is fairly simple:

You have called the cycle method before the jquery is loaded.

call cycle plugin on DOM ready..

$(document).ready(function(){
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 

        next:   '#next', 
        prev:   '#prev' 
    });  
});

that was the issue! Thank you so much for everyone's time and help! You are all lifesavers! — MasterFuel, Jun 11 '13 at 19:16

score 9 · Answer 2 · edited Jun 11 '13 at 19:58

9

2 issues.

Looks like your jQuery was not loaded properly.

You generally see this error

Uncaught ReferenceError:$ is not defined

when jQuery was not properly included on your page.

Try using jQuery from CDN and it should solve your problem

Replace

<script src="JS/jquery-1.10.1.min.js"></script>

with the one from cdn

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

NOTE: if you test from file system, you need to add the http: to the above URL or it will fail

Next your script file is before the HTML . So need to contain the code in DOM Ready handler.

$(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        speed:  'fast', 
        next:   '#next', 
        prev:   '#prev' 
    });
});

As far as I know 'Slider' was referenced when I created the div Id.

No it is not. If your script was included just before the body , then you may not enclose it in the Ready handler. But in your case it is present in the head. So when the script starts running that particular element is still not present in the DOM

Check Fiddle

edited Jun 11 '13 at 19:58

mplungjan

169,008
28
173
236

answered Jun 11 '13 at 17:56

Sushanth --

55,259
9
66
105

Oh so after attempting your help, I still am not seeing positive results.. Green Cold-Formed Steel | Home @sushanth – MasterFuel Jun 11 '13 at 18:08
Yea, this is just a jumble of code.. you should revise your question above if you've changed your code. – benastan Jun 11 '13 at 18:20
The reason that code in your comment did not work is likely because you tested from your file system. When you do that you MUST have http: in front of the //ajax..... You should accept this answer since it is correct and was first – mplungjan Jun 11 '13 at 19:56

Raghav · Answer 3 · 2016-06-17T16:06:21.213

4

There might be two issues:

1) The JQuery might not have got loaded properly. You could test it using Chrome. Key in $ or jQuery to check if it is loaded properly. Chrome Console

2) This is based on my experience in some JQuery.js which would have got bundled with other JS libraries, where $ will not be supported and you are forced to use jQuery instead of $ Check out for the below line in the js file that you have loaded in your project.

window.jQuery = window.$ = jQuery;

I see that by using http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js didn't work for me but I used http://code.jquery.com/jquery-1.7.2.min.js

Below is the only part in your code that I edited and it started working fine for me.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

edited Jun 17 '16 at 16:06

answered Jun 11 '13 at 18:12

Raghav

6,893
3
19
28

As @Rag Mentioned, I replace $ with jQuery, the error no longer comes up, however the script is still not running. and when I run it in the console jQuery is not defined, is returned as an error – MasterFuel Jun 11 '13 at 18:20
sure, Now my error is ReferenceError: jQuery is not defined Thank you ALL for your a patience and kindness, I know and am dumb when it comes to this stuff. But I am trying my hardest, you guys are awesome at what you do! – MasterFuel Jun 11 '13 at 18:35
Could you edit the above question that you have posted with the latest code? – Raghav Jun 11 '13 at 18:38
I see that by using http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js didn't work for me but I used http://code.jquery.com/jquery-1.7.2.min.js Might be the support is not yet extended to 1.10.1 not sure. – Raghav Jun 11 '13 at 19:35

score 3 · Answer 4 · answered Apr 14 '15 at 09:45

3

As an addition. If you are using $(Jquery) in your .js file. Logically all libs or frameworks should be before that .js file.

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>

answered Apr 14 '15 at 09:45

Sergii Lisnychyi

477
4
10
16

Yes, jQuery cdn first then your custom js file. – Francislainy Campos Jan 17 '20 at 06:50

score 0 · Answer 5 · answered Feb 15 '16 at 18:49

I had this problem but the cause was very different to scenarios reported above. My site was working everywhere except on my older Android (2.2). Turned out this device was rejecting the https certificate at the code.jquery.com CDN, so it was not loading JQuery. The fix was to load JQuery resources from the https Google CDN instead (using URLs named by others above).

score 0 · Answer 6 · answered Nov 26 '21 at 11:36

I replaced my header file with the link to the Jquery lib on google, and it worked instantly as that page is loaded every time for me.

    <script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Uncaught ReferenceError: $ is not defined

6 Answers6

Linked