Resolving Prototype Scriptaculous jQuery Conflictions with noConflict() Example

There is a good chance if you are reading this, you were under the same problem I myself had a short while ago…

You’re using Scriptaculous or something else built on top of Prototype and everything works fine when one fine day or hour, you decide you want to incorporate a widget or some code that uses jQuery.

So you do what I did, search around only to have people mention with a high and mighty, auspicious sounding response that the answer to all your problems, the magical cure-all for your what ails ya:

jQuery.noConflict();

Of course they mention that all you have to do is “call this code” after importing the jquery script.. and possibly that you should call it like this ‘$.noConflict();’ or perhaps ‘jQuery.noConflict();’ or laughingly ‘$jQuery.noConflict();’

Some of the smarter (but no more helpful) ones tell you correctly to use assign the noConflict to a variable

like so:
$var = jQuery.noConflict();

Yet they then expect you to just know what to do from there. Great. Thanks. So you spend a couple hours thinking that maybe if you call the statement before the script is imported or right after or before that one or after that one, and then you start to change some of the references in your code.

No luck?

The thing is that all references to $ need to be changed.

Let’s go over an example. I was using a script for a neat little widget on a site that I was working on and it sat on top of Scriptaculous (and of course Prototype). When I dropped in the jQuery code… things went all to hell.

Courage Wolf Says its Better to Have Tried and Failed than to Never Try At All
He may be right, but we're not going to fail this time!

The Scriptaculous is not important, we do not have to make any changes to any of that code at all to get your new jQuery code to work. In my example I dropped in a modalbox, one of my favorites called “Sexylightbox“.

I placed my new modalbox code after my old code.

It required these lines to work:


Import/Src these scripts:


jquery.js
jquery.easing.js
sexylightbox.v2.3.jquery.js

Then it also needed to be initialized:

<script type=”text/javascript>

$(document).ready(function(){

SexyLightbox.initialize({color:’black‘, dir: ‘../../images/sexyimages‘});

});
</script>

Then I had to decide what to name my noConflict variable.. in this case I decided to go with $sexy.

So I changed

 

<script type=”text/javascript>

$(document).ready(function(){

SexyLightbox.initialize({color:’black‘, dir: ‘../../images/sexyimages‘});

});
</script>

to

 

<script type=”text/javascript>

$sexy(document).ready(function(){

SexyLightbox.initialize({color:’black‘, dir: ‘../../images/sexyimages‘});

});
</script>

This is just the first step! I made sure to edit sexylightbox.v2.3.jquery.js and I added in this line to the top of the file:


$sexy = jQuery.noConflict();

Then, I completed it with my finish move and in my editor VI I replaced every instance of the $ character with the $sexy string using a global search and replace command while in Escape mode. If you’re more of the GUI type and using BlueFish or SlickEdit or something else, then you should have a “Replace” and then “Replace All Instances of” option under the Find menubar option.

Then as crazy as it may sound, everything just started working perfectly.

The important thing to keep in mind is that every single instance of where jQuery code is using the $, you have to replace it with the new variable you’ve created with the noConflict function. I wish someone had spelled it out that simply for me.. would have saved me hours of wasted time and frustration.

2 Comments
  1. Reply Joe April 8, 2012 at 07:17

    Thank you so much. was running in circles trying to fix this!

  2. Reply Vaughan July 30, 2013 at 18:26

    Went through exactly the same process as you did! I was nodding my head at every step you mention and now I’ve got the solution – in simple, non-jquery speak. And it works! Thank you!

Leave a Reply