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 jQ

Answer 1

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 2

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 3

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 4

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 5

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 6

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.
});