CODEWITHSUNDEEP
jqueryfirefoxgoogle-chrome
Ian Boyd
Ian Boyd

Reputation: 256591

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

Upvotes: 7

Views: 37432

Answers (7)

nepdev
nepdev

Reputation: 977

None of the above was applicable for me on Chrome 49. I had to specify the type as "application/javascript" like so: 

<script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script>

Using "text/javascript" was not working.

Upvotes: 1

Eric Leschinski
Eric Leschinski

Reputation: 153832

You can get this error with Javascript in Firefox and Chrome:

Uncaught ReferenceError: $ is not defined.

If you included jquery like this:

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

And your server is configured to not allow javascript content to be downloaded and run at runtime, then you get the above error. Take a look at the whole error:

[blocked] The page at https://yoursite.com/blah# ran insecure content 
from http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js.
/blah#:1
Uncaught ReferenceError: $ is not defined

What it means is your web server doesn't allow javascript content to be loaded on the fly. It's a security risk because someone could inject evil stuff in there for you to download, and own your servers.

Upvotes: 3

Patriotec
Patriotec

Reputation: 1144

Instead of the onclick in the html, I assigned everything via id in the Jquery code.

I'm not sure if you want to know if the div is checked or if the checkbox is checked. I put the input check in the code and commented out code if the div is clicked on.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
// $('#divid').unbind("click").click(function(){
$('#someid').unbind("click").click(function(){
if($(this).is(':checked')){
alert("checked");
}else{
alert("not checked");
}
});
});
</script>

</head>
<body>

<div id="divid"><input type="checkbox" id="someid"></div>

</body>
</html>

Upvotes: 0

Ian Boyd
Ian Boyd

Reputation: 256591

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.

Upvotes: 7

laymanje
laymanje

Reputation: 833

Your function needs to be wrapped in a dom ready:

$(function(){

  function divClick(sender, event)
  {
     var chk = $(sender).find("input").first()[0];
     alert("Works in ie");
  }

});

That will allow the function to fire only after the page has loaded. also your scripts should be loaded just before the closing HTML tag. not all the top. that will allow the page to load the HTML and css faster because it does not have to wait for the JS to load.

Also make sure you have the correct path to jQuery from your HTML.

Last thing,

Instead if having your click listener in inline HTML try moving it to the JS. It is just a cleaner more organized way to handle it. 

$('.clickMe').click(function(){
    //do stuff here
})

Upvotes: 0

Tania Petsouka
Tania Petsouka

Reputation: 1424

Try :

var chk = jQuery(sender).find("input").first()[0];

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

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.

Upvotes: 5

Related Questions