27

Hi I am having a "Uncaught ReferenceError: $ is not defined" while using bellow codes

I am currently getting the following error in my log. I have been looking at the samples in the framework and I just can't seem to find where the error is. It's been over a decade since I have done any HTML or js and what I did back then was very basic stuff. Any help would be appreciated

<script type="text/javascript">
var sQuery = '<?php echo $sQuery; ?>';

$(document).ready(function(){
    if($('input[name=sPattern]').val() == sQuery) {
        $('input[name=sPattern]').css('color', 'gray');
    }
    $('input[name=sPattern]').click(function(){
        if($('input[name=sPattern]').val() == sQuery) {
            $('input[name=sPattern]').val('');
            $('input[name=sPattern]').css('color', '');
        }
    });
    $('input[name=sPattern]').blur(function(){
        if($('input[name=sPattern]').val() == '') {
            $('input[name=sPattern]').val(sQuery);
            $('input[name=sPattern]').css('color', 'gray');
        }
    });
    $('input[name=sPattern]').keypress(function(){
        $('input[name=sPattern]').css('background','');
    })
});
function doSearch() {
    if($('input[name=sPattern]').val() == sQuery){
        return false;
    }
    if($('input[name=sPattern]').val().length < 3) {
        $('input[name=sPattern]').css('background', '#FFC6C6');
        return false;
    }
    return true;
}
</script>

enter image description here

j08691
  • 204,283
  • 31
  • 260
  • 272
Monika Milosavich
  • 271
  • 1
  • 3
  • 3
  • 5
    Do you have the jQuery library included in your source? – sachleen Jun 02 '12 at 18:25
  • 1
    be sure included jquery to your project – Mennan Jun 02 '12 at 18:25
  • 1
    You didn't have the proper tags for this question - whenever you ask questions please add relevant tags – codingbiz Jun 02 '12 at 18:28
  • 1
    possible duplicate of [Interesting Uncaught ReferenceError: "$ is not defined"](http://stackoverflow.com/questions/9230572/interesting-uncaught-referenceerror-is-not-defined) and [Uncaught ReferenceError: $ is not defined](http://stackoverflow.com/questions/6454694/uncaught-referenceerror-is-not-defined) and [many others](http://stackoverflow.com/search?q=jquery+Uncaught+ReferenceError%3A+%24+is+not+defined). – Felix Kling Jun 02 '12 at 18:34

8 Answers8

17

It seems you don't import jquery. Those $ functions come with this non standard (but very useful) library.

Read the tutorial there : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery It starts with how to import the library.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 2
    That's not included in browsers, you have to do it. But I agree if your point is that this library is the one that almost everybody should use (and that's a phenomenon very rare in the dev world where usually I find that people are much too willing to add useless libraries). – Denys Séguret Jun 02 '12 at 19:00
  • 1
    non native should be the word. You should look [here](http://www.mikedoesweb.com/wp-content/uploads/2012/05/20091116-so-large.gif) :D – Jashwant Jun 02 '12 at 19:07
  • 1
    I get your point. Speaking of "native", I'm not a native English speaker and thus don't always choose the most appropriate word. Sorry. – Denys Séguret Jun 02 '12 at 19:08
  • Worked for me. Make sure you're calling/referencing your JQuery script () before your functions definition or reference. – M.Hossein Rahimi Mar 07 '23 at 00:05
12

No need to use jQuery.noConflict and all

Try this instead:

// Replace line no. 87 (guessing from your chrome console) to the following

jQuery(document).ready(function($){

// All your code using $

});

If you still get error at line 87, like Uncaught reference error: jQuery is not defined, then you need to include jQuery file before using it, for which you can check the above answers

Om Shankar
  • 7,989
  • 4
  • 34
  • 54
10

Put this code in the <head></head> tags:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
tmwilliamlin
  • 121
  • 1
  • 7
4

If you are sure jQuery is included try replacing $ with jQuery and try again.

Something like

jQuery(document).ready(function(){..

Still if you are getting error, you haven't included jQuery.

kiranvj
  • 32,342
  • 7
  • 71
  • 76
4

I know this is an old question, and most people have replied with good answers. But for reference and hopefully saving somebody else's time. Check if your function:

$(document).ready(function(){}

is being called after you have loaded the JQuery library

Raul Reyes
  • 453
  • 1
  • 4
  • 12
1

many other people answered your question above. This problen arises when your script don't find the jQuery script and if you are using other framework or cms then maybe there is a conflict between jQuery and other libraries. In my case i used as following- `

<script src="js_directory/jquery.1.7.min.js"></script>
    <script>
    jQuery.noConflict();
    jQuery(document).ready(
    function($){
    //your other code here
    });</script>

`

here might be some syntax error. Please forgive me because i'm writing from my cell phone. Thanks

Kick Buttowski
  • 6,709
  • 13
  • 37
  • 58
maksbd19
  • 3,785
  • 28
  • 37
0

Remember that you must first load jquery script and then the script js

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

Html is read sequentially!

Revol89
  • 871
  • 8
  • 4
0

$ is a function provided by the jQuery library, it won't be available unless you have loaded the jQuery library.

You need to add jQuery (typically with a <script> element which can point at a local copy of the library or one hosted on a CDN). Make sure you are using a current and supported version: Many answers on this question recommend using 1.x or 2.x versions of jQuery which are no longer supported and have known security issues.

<script src="/path/to/jquery.js"></script>

Make sure you load jQuery before you run any script which depends on it.

The jQuery homepage will have a link to download the current version of the library (at the time of writing it is 3.5.1 but that may change by the time you read this).

Further down the page you will find a section on using jQuery with a CDN which links to a number of places that will host the library for you.

(NB: Some other libraries provide a $ function, and browsers have native $ variables which are only available in the Developer Tools Console, but this question isn't about those).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335