Main Menu
Sub Menu
- Article Ref
- 2036-QYSZ-5773
- Written By
- wong
- Date Created
- Tue, 7th Jun 2011
- Updated By
- wong
- Date Modified
- Tue, 7th Jun 2011
Solved: Uncaught exception: TypeError: '$(document).ready' is not a function
Question
Trying to implement jquery together with prototype or scriptaculous or mootools, etc will cause js conflict in jquery object.
Uncaught exception: TypeError: '$(document).ready' is not a function
Answer
Uncaught exception: TypeError: '$(document).ready' is not a function
Error thrown at line x, column y in http://yourdomain.com/:
$(document).ready(function() {
This happens because another javascript library has been loaded and has overwritten the object $() shortcut for jQuery.
So when we include other javascript libraries besides jquery, we are exposing the jquery library to conflicts.
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
One solution if we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict() like:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ follow here.
});
// Code that uses other library's $ follow here.
</script>
Another solution is to reassign jquery object $() back to jquery library, wrapping up our call inside a function that reassigns $() object. Thus we make sure our code isn’t messed with Prototype, Scriptaculous, etc.
( function($) {
// Your jquery code
} ) ( jQuery );
Suppose:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
( function($) {
// Assigning $ again to jquery
$(document).ready( function() { alert("Now you can use to use '$' in your jquery code"); } );
} ) ( jQuery );
//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>
This approach is a self-calling anonymous function style to avoid conflicts with jQuery. If you don't use it then you would have to type jQuery() instead of its object $().
Example:
$(document) won't work
jquery(document) will work
Using the self-calling function protects your code from any scoping issues and lets the code function normally when jQuery is put into no conflict mode.
jQuery.noConflict( [ removeAll ] )
removeAllA Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself)
Article Comments
There are currently no comments.








