jQuery: noConflict

Question

I just cannot work this out. My god it's making my brain hurt, so I turn to you, the good people of the internet.

I've been staring at the documentation for the jQuery $.noConflict() function with no luck.

My issue is that the site I'm working on already includes jQuery 1.1.3.1 but I want to do some awesome and snazzy UI work in a few places, so I want to use 1.4.2 for obvious reasons.

I've been trying to run these side by side but I can't seem to get any code to execute. I also need to implement a few plugins using 1.4.2 so I'm not sure if putting jQuery over to something like $j would work, as obviously the plugins would pick up $ and jQuery as 1.1.3.1 rather than 1.4.2.

Is there a way that I can wrap my code in a noConflict() block and also include the plugins that I need to create a self contained block of 1.4.2 code?

Any help would be fantastic as my poor mind weeps amid the vast wasteland that is the API docs!

Answer 1

If you have two or three jQuery in the same page, just put a different variable for each different jQuery.

Example:

<script type="text/javascript">
    var $s = jQuery.noConflict();
    $s(document).ready(function() {
        $s('#news-container').vTicker({
            speed: 500,
            pause: 3000,
            animation: 'fade',
            mousePause: true,
            showItems: 2
        });
    });
</script>
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('.sf-menu ul').superfish({
            delay: 1000,
            animation: {
                opacity: 'show',
                height: 'show'
            },
            speed: 'medium',
            autoArrows: false,
            dropShadows: 'medium'
        });
    });
</script>

Answer 2

You should simply upgrade the entire site to 1.4.2.
jQuery does not in general have many breaking changes, so that shouldn't be so hard.

Answer 3

I had a similar issue recently where I was using jQuery v1.3.2 on a page but a 3rd party questionnaire popup was using an older version on the same page. I eventually managed to solve the problem. I referenced jQuery 1.3.2 as follows:

 <script type="text/javascript" src"/Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript"> 
        jq132 = jQuery.noConflict(true); 
 </script> 

I then modified all my jQuery code to use jq132 instead of $. I then did a find and replace on all of the plugins I was using to replace "$(" with "jq132(" and "$." with "jq132.". There may be a more elegant approach but this worked for me. I'm far from a jQuery expert so there may be other $ syntax that you need to handle (i.e. not just "." and "(").) .