smaller reset larger        English  Spanish  French  German  Italian         

Main Menu

All times are in GMT -5 (DST) :: The time is now 3:15 pm.

Sub Menu

Article Data
Article Ref
2036-QYSZ-5773
Written By
wong
Date Created
Tue, 7th Jun 2011
Updated By
wong
Date Modified
Tue, 7th Jun 2011
 
(Lost?)

   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)

How Useful Was This Article?      (Rating: 90%    Votes: 4)  

Select a Rating

Article Comments 

There are currently no comments.