Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome: Uncaught ReferenceError: $ is not defined

I am using jQuery in a web page. When using $ in Internet Explorer it works fine. When referencing $ in Chrome or Firefox it fails with error:

Uncaught ReferenceError: $ is not defined.

Screenshot:

enter image description here

With my source code:

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
      function divClick(sender, event)
      {
//       var chk = $(sender).find("input").first()[0];
         var chk = jQuery(sender).find("input").first()[0];
         alert("Works in ie");
      }
   </script>
</head>
<body>

<div onclick="divClick(this, event)">
    <input type="checkbox">
</div>

</body>
</html>

Note: The browsers are being directed to a file on the local filesystem:

enter image description here

Update: Tried changing it to jQuery.

Update: Chrome finds the jquery file (i.e. no 404):

enter image description here

like image 347
Ian Boyd Avatar asked May 18 '12 19:05

Ian Boyd


People also ask

How to solve uncaught ReferenceError $is not defined in JavaScript?

Solution 1: Using before defining - Uncaught ReferenceError: $ is not defined Case: Invoking the function or using a variable before declaring it. As you are aware, all javascript code is executed inside the browser such as Chrome, Mozilla, Safari, and IE. So, If you using any variable before declaring or defining, browse will throw this error.

What does the error $is not defined mean?

This indicates with an error saying "uncaught reference error $ is not defined". This is the most generic error even if you are working on Angular Js, Ajax, Html, and MVC, laravel or rails .. any framework which is related to javascript.

Why do I get an uncaught ReferenceError when using a library?

As a result, an “uncaught ReferenceError” will be thrown. This is because the script is attempting to reference a variable that doesn’t exist. To fix this, we need to include the library before we attempt to use any of its methods: Failure to include the library.

Why do I keep getting ReferenceError in jQuery?

If you are working with the JQuery library, then there is a pretty good chance that you will encounter the following JavaScript error at some point in time: Typically speaking, this ReferenceError occurs when a developer attempts to use the JQuery library before they have actually included it.


2 Answers

And this question is here just to document the bug in Chrome and Firefox:

Html File encoding           IE9      Chrome
=========================    =======  ======
Windows-1252                 Works    Works
UTF-8 (without BOM)          Works    Works 
UTF-8 (with BOM EFBB)        Works    Works 
UTF-16 (with LE BOM FFFE)    Works    Fails
UTF-16 (with BE BOM FEFF)    Works    Fails

Presumably Chrome (and Firefox) assume that a separate script file has the same encoding as the html file.

Chrome then tries to read jquery-1.7.2.js as UTF-16, and is shocked to discover that the file is pure (Windows-1252) garbage.

like image 144
Ian Boyd Avatar answered Nov 05 '22 19:11

Ian Boyd


Check whether the path of jquery-1.7.2.min.js is correct. You can check in firebug if using firefox or chrome developer tool to see if the file is getting downloaded. You are mostly likely getting 404 for jQuery file due which $ is undefined on the page which is an alias to jQuery object.

like image 20
ShankarSangoli Avatar answered Nov 05 '22 18:11

ShankarSangoli