Ian Boyd Ian Boyd - 6 months ago 20
Javascript Question

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

Answer

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.

Comments