Uncaught ReferenceError: $ is not defined [duplicate]

Question

I've been getting undefined error and I dont know how to fix it.

Here's my code:

<script type="text/javascript">
    function returnBlurayDisc(member_id){
         var xmlhttp;

         if (window.XMLHttpRequest){
              xmlhttp=new XMLHttpRequest();
     }else{
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }

     xmlhttp.onreadystatechange=function(){
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
         document.getElementById("popup_container").innerHTML=xmlhttp.responseText;
         $("#GrayBackground").css({'height':'1900px','display':'inline'});

           }
     }

     xmlhttp.open("GET","ajax/returnAjax.php?member_id="+member_id+"&name="+name);
     xmlhttp.send();    
     }
</script>

The error is Uncaught ReferenceError: $ is not defined. Kindly help me.

Answer 1

This line:

$("#GrayBackground").css({'height':'1900px','display':'inline'});

uses jQuery (via the $ function), which is a library you need to include in your page if you want this line of code in there.

Put this in the top of your page to test:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Worth noting that if you want to adopt jQuery-- which is a fine idea in many cases-- you can use it to simplify a bunch of stuff, including the AJAX request, which you're now doing manually.

Answer 2

$ in your code most probably refers to jQuery library. So, make sure you have included jQuery library file in your document.

If you use CDN then you have to include a similar tag like below on head section of your document.

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

This includes the JQuery Library on your document and you can finally use the $ to target elements.