This article will guide you how to solve the conflict between jQuery and Prototype to simultaneously, in order to use both libraries on the same web page.
- Demo
- Enlarge
- Reload
- New window
Free iPage Web Hosting for First Year NOW
If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?
Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
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 :)
- Sent (0)
- New
Save up to 630$ when buy new iPhone 15
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language
Dall-E-OpenAI.com
Generate creative images automatically with AI
AIVideo-App.com
Render creative video automatically with AI