Prototype and jQuery conflict resolution. Prototype JavaScript Library interferes with jQuery.
July 24, 2009 by MK
Filed under Javascript, web development
I experienced this conflict quite recently when I was working on WordPress Featured Articles Plugin. Normally jQuery.noConflict() comes to the rescue but not in my case. And the reason being - prototype was already interacting and was included at the top, so it was already using the $ variable.
This conflict causes the creation of the jQuery object to fail.
All the following errors are related to this conflict and you might get one or all of the following while using Prototype (Scriptaculous) and jQuery -
jQuery is not defined
$ is not a function
$ is not defined $(document).ready(function(){
Component returned failure code: 0×80040111 JavaScript error
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]” nsresult: “0×80004005 (NS_ERROR_FAILURE)”
What can we do to fix this?
You can try moving the jQuery.js to top and than use jQuery.noConflict().
If that is not an option you can do the following -
IMPORTANT - Do not use [REPLACE ALL]
- Edit prototype.js - find where it defines function $() and change the name to function $$$()
- Still in prototype.js, carefully replace each occurrence of $(…) with $$$(…), but don’t touch anything which says $$(…)
- Edit each of the other *.js files (e.g. effects.js) and carefully replace each occurrence of $(…) with $$$(…), but don’t touch anything which says $$(…).
- That is it.
And just in case you have trouble doing the above, Following links point to already edited prototype.js and effects.js. Please remember all the references to these files must start with $$$ instead of $.
Download - Prototype.js
Download - Effects.js
Hopefully this article will help some of our fellow coders and save them some time and frustration. Happy Coding guys :)
Related posts brought to you by Yet Another Related Posts Plugin.
very useful & good tutorial, thank you very much for sharing.
Can you share this tutorial on my JavaScript library?
Awaiting your response. Thank
Sure, I am all for making info available to everyone. Please do let me know if I need to do anything for that. Thanks.
Brilliant!
Thank U very much MK . Your solution worked like a charm. saved my day. The only thing i can say is u r brilliant.
Thanks again.
This is the solution I was looking for with conflicting libraries. Thank you very much. I wish I found your post 3 hours ago!
Thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thank gosh someone found this. I have been working on getting prototype and jquery working together with the use of the $ for some time. Just had way too much jquery to enforce the use of jQuery.noConflict().
Thanks again.
Very useful, thank you :) Christian
Thank you very much, it worked when i used the alternated versions of the effects.js en prototype.js files.
Thank you so much!!! Today is honestly the first day I have ever really even touched Javascript and the jquery/prototype conflict has been causing me to pull my hair out for the past 4hrs. The jquery noconflict thing was not working for me but replacing all “$(” with “$$$(” in both the prototype.js and the object which requires prototype(tooltip.js) worked like a charm. Now I will be able to sleep tonight! lol :)
thank you so much for this!