Tuesday, January 1, 2013

How to avoid Uncaught ReferenceError: $ is not defined in jQuery

Sometimes while developing an existing Web Application, I wanted to use jQuery function and I get this error "Uncaught ReferenceError: $ is not defined".

There are some reasons causing it and ways to avoid them:
  • Make sure the references to the jQuery scripts is loading first, but them in the head of master page or the page you are using.
  • Sometimes the references to the jQuery scripts is loading twice, make sure it loads only once.
  • If you have external js files with your function, which depend on other jQuery libraries, you have to load that library first, and then dependent JS file with your functions.
Example:

This will not work:
<script src="customlib.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
But this will work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="customlib.js"></script>

Source: https://www.nilebits.com/blog/2011/06/how-to-avoid-uncaught-referenceerror-is-not-defined-in-jquery/