October 19, 2008 7:17 pm GMT

jQuery : Error: $(document).ready is not a function — Sure!

by Gary Illyes


This error message appears only if another framework is in conflict with the almighty jQuery. For example You try to use Prototype/Scriptaculous for Lightbox but you also need Thickbox for something else, which requires jQuery.

Since no framework is compatible with another framework, you have to find a workaround to get things working.

And here comes jQuery in your help. The jQuery team was smart enough to realize that there will be conflicts between frameworks, especially the $ will cause massive headaches since it’s the basic of each framework. $ is the shortcut for the word “jQuery”

So, they invented jQuery.noConflict();. This will let you to replace the $ with the word jQuery, in all your code. So, when you need to call this: $(document).ready(function(){ … You simply replace the $ as I said above: jQuery(document).ready(function(){ …, don’t forget to call jQuery.noConflict(); before this.

So, when you use the noConflict() function, your code should look something like this:

<head>
  
  
  
</head>

World saved again, now you can use 2 frameworks together.


All about: , , , ,

Comments

26 Comments on " jQuery : Error: $(document).ready is not a function — Sure! "

  1. Juanlu_001 on Sat, 29th Nov 2008 11:47 am  

    This saved me, thank you very much!! :)

  2. Thomas I on Sat, 29th Nov 2008 1:07 pm  

    With much pleasure Juanlu

  3. jonycus on Mon, 1st Dec 2008 6:31 pm  

    I lost about a day with this problem… and guess what.. this WORKED!!! I owe you a case of beer man..

    Cheers!!!

  4. Andy Forbes on Fri, 5th Dec 2008 12:48 pm  

    Mirroring previous comments – wish I had found your site earlier, absolutely spot on, why cannot jquery offer this on their site more prominently.

    Much Thanks, such a simple fix for a giant thorn in my side!

  5. Me on Fri, 6th Feb 2009 6:46 pm  

    Yeah….I can’t explain how glad I was to stumble upon your site and see this fix. I was going nuts, but now everything is working 100%. Thanks!

  6. Will on Wed, 11th Mar 2009 3:59 pm  

    Thank you for this. I used it on my site, and it fixed the problem I was having. I’m not a javascript wizard, just a web designer that needs to use it once and awhile. Thanks again!

  7. erhard on Wed, 20th May 2009 8:14 pm  

    You saved me time thanks

    Erhard

  8. erhard on Wed, 20th May 2009 9:17 pm  

    One additional thing :

    First load jQuery then call no conflict and the the other lib.

    Here a doc snippet :

    NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias. jQuery.noConflict returns a reference to jQuery, so it can be used to override the $() alias of the jQuery object.

    Is very important

    Thanks
    Erhard

  9. Julia on Thu, 11th Jun 2009 11:16 pm  

    thank you for your post, it saved me and my blog :)

  10. eric on Tue, 11th Aug 2009 1:52 pm  

    Thanks for your articles,it’s very useful for me.

    The way to solve my problem is delete the following codes:

    jQuery.noConflict();

    Giving the important basic clues to me!
    Thanks very much!

  11. T on Fri, 23rd Oct 2009 8:44 pm  

    How about the jquery lavalamp http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ and the prettyphoto lightbox. How can i implement these two together?

  12. lei on Mon, 9th Nov 2009 3:26 am  

    Thank you so much! I have solved the problem due to your help!

  13. Val on Thu, 12th Nov 2009 3:09 pm  

    Thanx a lot you save me a lot of time and search….

  14. Anup on Sat, 28th Nov 2009 11:28 am  

    Hey thanks for this wonderful tip, but still my JQury function is for slide up and down is not working. I seen the error log, there are no errors in it. What problem it might having any guesses?

    this is the code

    jQuery.noConflict();
    jQuery(document).ready(function()
    {

    jQuery(“.accordion h3:first”).addClass(“active”);
    jQuery(“.accordion p:not(:first)”).hide();

    jQuery(“.accordion h3″).click(function(){
    jQuery(this).next(“p”).slideToggle(“slow”)
    .siblings(“p:visible”).slideUp(“slow”);
    jQuery(this).toggleClass(“active”);
    jQuery(this).siblings(“h3″).removeClass(“active”);
    });

    });

  15. kids on Mon, 30th Nov 2009 5:28 am  

    that’s very useful… thanks.
    but i still have a problem here…
    when i use JQuery
    jQuery.noConflict();
    jQuery(document).ready(function() {
    –> no Problemo….running well.

    but, the prototype show me an error :
    Error: $ is not a function
    Source File: http://blablabla/web/sfProtoculousPlugin/js/prototype.js
    Line: 3955

    what should i do ?
    would you help me please…

  16. Carl O'Dell on Thu, 3rd Dec 2009 11:16 pm  

    You solved my problem, Thanks!

  17. Amy on Mon, 7th Dec 2009 12:33 am  

    THANK YOU for this. Banging my head against the wall in wordpress trying to solve this. You saved my bacon!

  18. Rob on Mon, 14th Dec 2009 6:45 am  

    THANK YOU THANK YOU THANK YOU!!!!

  19. Andreashe on Mon, 28th Dec 2009 11:12 am  

    I had this Problem without using a different framework. Got it in Firefox and Konqueror.

    Used only the Example code for a dialog.

    http://docs.jquery.com/UI/Dialog

    It happened only when using a webserver (http), not when using a file.

  20. Larry on Tue, 26th Jan 2010 12:20 am  

    I have the same issue as T above. I can not for the life of me get lavalamp and prettyphoto to work correctly together. Has T or anyone had success with this? I’m not exactly sure I properly applied the no conflict function, I’ve been back and forth for hours trying seemingly everything. Any help is greatly appreciated.

  21. Maria Radyuk on Wed, 24th Feb 2010 10:33 am  

    Thanks a lot!
    Very useful articlte!

  22. Duane on Mon, 8th Mar 2010 7:05 pm  

    Thanks for amigo you, google and jQuery just saved me :)

  23. Jimmy on Wed, 10th Mar 2010 7:00 am  

    Thanks a lot, this stopped me from pulling too much of my hair out!

  24. Paul on Sun, 21st Mar 2010 7:36 am  

    Thank you very much. I was searching for a solution. This made it really easy to fix the problem I was having when developing my custom wordpress theme. I could not find anything this straight forward on the wp forums.

    JQuery rocks!

    I wrote an article about my experience: http://paullumsdaine.com/jquery-headaches-with-wordpress/

  25. Esteban on Tue, 6th Apr 2010 12:53 pm  

    Hi!

    I stumbled upon this article: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/ and I was wondering what’s wrong with this solution:

    function($) {
    // we can now rely on $ within the safety of our “bodyguard” function
    $(document).ready( function() { alert(“nyah nyah! I’m able to use ‘$’!!!!”); } );
    } ) ( jQuery );

  26. GuinuX on Mon, 12th Apr 2010 4:59 pm  

    Thanx a lot for this very useful article. Saved hours of headheack

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

If you want to use your OpenID, fill out the field labeled "Website" with the OpenID URL. The other fields may remain empty.
Note that comments are pre-moderated.

Subscribe without commenting