Geek Answers Handbook

Uncaught ReferenceError: $ not defined

I get this error message when trying to create a jQuery image slider.

Unprepared ReferenceError: $ undefined

Here is my new coding (note that I moved the script to a 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 path to the JS folder for my website (locally) is as follows: C: \ Users \ Andrew \ Desktop \ GCFS \ JS

I'm new to the coding world, but what I'm trying to achieve is pretty simple. As far as I know, I do not need to have a ready-made function, and javascript should start automatically. Thank you for your help!

From the 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>
+7
source share
5 answers

Decision:

1) Use Google CDN to download 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 Cycle Plugin, it is compatible with jQuery v1.5-v1.7, because most of the methods were deprecated in jQuery 1.8+. It is for this reason that I used the v1.5 jQuery Google CDN in paragraph 1. Most examples in the loop plugin use jquery 1.5.

3) Clear the browser cache, this is the main culprit in most cases.

4) PLease checks jquery loading using the code below

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

The main change:

The cause of the error is quite simple:

You called the loop method before loading jquery.

The DOM call loop plugin is ready.

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

2 questions.

It looks like your jQuery has not been loaded properly.

You usually see this error

 Uncaught ReferenceError:$ is not defined

when jQuery was not correctly included in your page.

Try using jQuery from the CDN and it should solve your problem.

Replace

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

with one of cdn

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

NOTE: if you are testing from the file system, you need to add http: to the above URL, otherwise it will fail

Next, your script file is before the HTML . Therefore, you must contain the code in the 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 identifier.

No, it is not. If your script was included immediately before the body, you cannot wrap it in a Ready handler. But in your case, it is present in the head. Therefore, when the script starts working, this particular element is still not present in the DOM

Check feed

+9
source

Two problems are possible:

1) Maybe jQuery is loading incorrectly. You can test it using Chrome. Enter $ or jQuery to check if it is loaded correctly. Chrome console

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

 window.jQuery = window.$ = jQuery;

I see that using http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js did not work for me, but I used http://code.jquery.com/jquery -1.7.2.min.js

Below is the only part of 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>
+3
source

As a supplement. If you use $ (jQuery) in your .js file. Logically, all libraries or frameworks must be before this .js file.

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

I had this problem, but the reason was very different from the scenarios described above. My site worked everywhere except my old Android (2.2). When turned off, this device rejected the https certificate on CDN code.jquery.com, so it did not download jQuery. It was fixed to load jQuery resources from the https Google CDN (using the URLs named by others above).

0
source

More articles:


All Articles