[javascript] $(document).ready(function(){ Uncaught ReferenceError: $ is not defined

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

This question is related to javascript jquery referenceerror

The answer is


$ 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).


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


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!


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.


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

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

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.


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


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