$(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>

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.

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

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.

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

maksbd19

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

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!

来源：https://stackoverflow.com/questions/10864833/document-readyfunction-uncaught-referenceerror-is-not-defined

标签

javascript

jquery

referenceerror