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 "(").) .

Answer 4

You should post an example that isn't working. I bet we'd clear it up immediately.

I don't believe noConflict is a 'block' exactly. You use noConflict to tell jQuery that you want it to remove anything it declares from the global JavaScript namespace (because you want to load jQuery again and reuse those names).

On a page with more than 1 instance of jQuery loaded, both instances should use noConflict. I don't know if it's possible to load a second instance of jQuery if there's already an instance loaded and that instance didn't call noConflict.

@SLaks and @galambalazs: Sometimes you're writing a small amount of content that will be displayed within a larger page, such as a portal. The portal already uses a(n outdated) version of jQuery, but you need a newer version. Also you don't control the larger portal page, just the content you're writing that will be displayed within it.

This scenario accurately describes real work I do commonly.

Answer 5

I would agree with other posts that suggest trying to upgrade to 1.4.2 across the board... That said, you clearly have a good reason for attempting what you are trying to do. To my knowledge there is no easy way to deal with your situation (as I too have tried something similar).

"noConflict" simply releases the global "$" variable so that other libraries/scripts may safely use it. Given that you are trying to use two versions of jQuery "noConflict" isn't really helpful here...calling it for both versions of jQuery doesn't change the fact that both versions still need to reference the global "jQuery" object (of which there can only be one...).

The issue (as you clearly already know) is that loading the 2nd jQuery version will "clobber" the original jQuery object (and all the "customizations" made to it by plug-ins).

The only reliable (albeit incredibly inefficient) solution I could come up with is:

• Load the existing (old) jQuery version and plugins (assuming you can't avoid this)
• Load the new jQuery version
• RE-load and existing plugins and any new plugin you want to use
• Test extensively

Answer 6

WAY late .... but might help someone - threw this together.

/**
*********************************************************************************************************
*           jQuery version check
*           $.noConflict() is not enough to ensure jQuery as well as $ 
*           has correct version (can cause troubles with jQuery plugins that use fn(){}(jQuery);
*
*           useage: restoreJquery('1.10.2',true) //for unminimized dev version
*                   restoreJquery('1.10.2')          //for minimized version
*                   restoreJquery('1.10.2',true,myFunction)          //for minimized version, that executes a function once jQuery is in the page
*
*
**/

function restoreJquery(wantedVersion,devVersion,callback) {
    if(!wantedVersion){
        wantedVersion= '1.10.2';
    }

    //is current jQuery version ===wanted version? (double check to avoid undefined errors)
    if($ && $.fn.jquery!==wantedVersion){                

        //if not invoke noConflict with true (true=gives up the jQuery name space aswell as $)
        var $jQuery = jQuery.noConflict(true); 
        //Line Assign the new object to new instantiated versions of jQuery
        var $=jQuery=$jQuery;                          
      }

    //if jQuery is still not the correct version inject it into page via plain vanilla js

    //if $ does not exist or the version is wrong inject it into the page
    if(!$ || $.fn.jquery!==wantedVersion){ 

        var head=document.getElementsByTagName('head')[0], //get Head
            jqPath=wantedVersion+'jquery.', // ex '1.10.2/jquery.
                    script=document.createElement('script'); //create empty scripttag

            if(devVersion){  //minimized or not?
                jqPath+='min.js';
            }else{
                jqPath+='js';
            }

        script.src='//http://ajax.googleapis.com/ajax/libs/jquery/'+jqPath; //create src path
        script.type='text/javascript'; //add type
        script.async=true; //set async to true
        //real browsers
        script.onload=callback;  //call callback on load

        //Internet explorer doesnt support onload on script (typical ie)
        script.onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        }


    head.appendChild(script);

    }else{
        //otherwise call the callback since noConflict solved our jQuery versioning issues
        callback();
    }

};

Answer 7

A solid advice: don't stress your and your visitors bandwidth with two jQuery versions. Change your whole codebase to the latest version. It's got less bugs, more support and improved behavior.

Answer 8

jQuery no-conflict is an option given by jQuery team to overcome the conflicts between the different JS frameworks or libraries. We are replacing the $ to a new variable and assigning to jQuery when we use the noconflict method.

    <button>Test jQuery noConflict</button>
    <script>
        var newjq = $.noConflict();
        newjq(document).ready(function(){
           newjq("button").click(function(){
               newjq("p").text("Wahh..! Its working!");
            });
        });
    </script>

We can use the $ sign like below also, it not create any conflict also

$.noConflict();
jQuery(document).ready(function($) {
   // Code that uses jQuery's $ can follow here.
});