Saturday, December 7, 2013

Conflict in multiple jQuery files on same page

You may also like to see:

Many libraries use $ character as library main instance variable or function like jQuery. jQuery has created a shorter variable name $ so you can use it quicker instead of using jQuery. In other words using jQuery keyword or $ is same. Problem occurs when using multiple libraries using $ as there variable. For example you are using mootools and jQuery on the same page. Now if you try to use $ to call a function, it will throw an exception as there are two different libraries using this keyword as variable causing conflict.

jQuery allows you to free $ keyword using noConflict() method. So if you called this function now $ is no more associated to jQuery so you can use it for other library like mootools and to use jQuery code, you need to use jQuery keyword. Calling noConflict() with $ or jQuery only releases $ keyword. so jQuery.noConflict() and $.noConflict() are same.





Now if you have already written, code with $ keyword for jQuery or you still want to use $ keyword for jQuery library too, you can do a trick. You can pass $ as alias for jQuery in ready block. It is recommended that to use jQuery code always using this technique as in sometime later in application you may need you use any other library which cause conflict.





or you can initilaize anonymous function passing it object of jQuery as parameter and receive this parameter as $ keyword and use jQuery code with $ within that anonymous function scope.

jQuery.noConflict();
(function( $ ) { //receive parameter as $ alias

 //Now you can use $ for accessing jQuery from here
 $(function() {

   // Use jQuery code with $ keyword
   $( "div p" ).show();
 });

})(jQuery);// call anonymous function and pass jQuery instance variable

// Other code using $ as an alias to the other library
$( "content" ).style.display = "none";


Insead of $ you can also use any other character or word as jQuery instance variable by assigning it using noConflict() function.

var jq = jQuery.noConflict();

//Now you can access jQuery code using jq keyword
jq( "div p" ).show();


What if you are a using multiple jQuery version on same page? jQuery and $ keywords associated with which version?

Lets assume you are using a plugin with a jQuery version and at some time later jQuery updated its version which is required for another plugins. Both plugins of jQuery required different versions of jQuery because they do not support other versions.

So what now you have to do?


Here you may need to free jQuery keyword also because now jQuery keyword will also conflict so you need to free jQuery keyword. You can achieve this by passing true as parameter to noConflict() this will free both keyword from current libraries. You must need to initialize new instance variable for further use.

So now if you need to use multiple version of jQuery for different plugins, you may initialize different variable associated with different version of jQuery by passing true parameter to noConflict()





//you must load second library later after initializing
//first instance of version and freeup jQuery keyword
//else jQuery keyword will
//cause conflict it you uplaoded both files.





//so now here $ and jQuery both cannot be used

//using $jQuery1_10 will call version 1.10.0 library code
$jQuery1_10( "div p" ).show();

//using $jQuery1_9 will call version 1.9.0 library code
$jQuery1_9( "div p" ).show();


Here is Demo

If you want to add something to this post please comment below.

You may also like to see:

15 comments:

  1. Thanks for the info, helped me out :)

    ReplyDelete
  2. thank you very much...it is really very helpfull...

    ReplyDelete
  3. didnt help...i want to use jquery-2.1.1.min.js and jquery-1.4.2.min.js versions...but its not working :( :(

    ReplyDelete
    Replies
    1. what problem are u facing? can u provide details here?

      Delete
    2. @Reema here is demo for your scenario http://jsfiddle.net/zaheerahmed/qjunggbj/1/ , the problem I think you might be facing is that jquery 2.0 and above are not supported in IE8.

      Delete
  4. Hello. Very little jquery experience. Trying to use two different jquery plugins on the same page. They work fine individually, but not together.

    Can you take a look at the code and/or test link below, and let me know how to resolve. Thanks.

    Test link: http://resedachurch.com/testSliderCarousel.html


    - Slider -

    $(document).ready(function() {
    var slider = $('#slider').leanSlider({
    directionNav: '#slider-direction-nav',
    controlNav: '#slider-control-nav'
    });
    });


    - Carousel -
    var tpj=jQuery;
    tpj.noConflict();

    tpj(document).ready(function() {

    if (tpj.fn.cssOriginal!=undefined)
    tpj.fn.css = tpj.fn.cssOriginal;

    tpj('#services-example-1').services(
    {
    width:904,
    height:305,
    slideAmount:4,
    slideSpacing:30,
    carousel:"on",
    touchenabled:"off",
    mouseWheel:"off",
    hoverAlpha:"off", // Turns Alpha Fade on/off by Hovering
    slideshow:0, // 0 = No SlideShow, 1000 = 1 sec Slideshow (rotating automatically)
    hovereffect:"off", // All Hovereffect on/off
    callBack:function() { } //Callback any Function after loaded

    });
    });

    ReplyDelete
    Replies
    1. It is really difficult to guess the issue by seeing not working code, It is better if you provide a demo on jsfiddle.net to produce the issue. It is just a random guess that changing your noConflict() lines in following way might solve your issue:

      var tpj=jQuery.noConflict();

      Delete
    2. and change your slider code to anonymous function using parameter of jQuery:

      (function( $ ) { //receive parameter as $ alias

      $(document).ready(function() {
      var slider = $('#slider').leanSlider({
      directionNav: '#slider-direction-nav',
      controlNav: '#slider-control-nav'
      });
      });

      })(jQuery);// call anonymous function and pass jQuery instance variable

      Delete
    3. Thanks for your response. Was able to get it working.

      Updated Test Link : http://resedachurch.com/testSliderCarousel.html

      Delete
  5. thanq so much fa this usefull article

    ReplyDelete
  6. //Slider

    (function ($) { //receive parameter as $ alias

    $(document).ready(function () {
    $('#slider').cycle({
    fx: 'scrollHorz',

    pager: '#pager'
    });
    });

    })(jQuery);



    //Parallax
    var tpj = jQuery.noConflict();

    tpj(document).ready(function () {
    tpj('#nav').localScroll(800);
    tpj('#home').parallax("50%", 0.1);
    tpj('#about').parallax("50%", 0.1);
    tpj('#menu').parallax("50%", 0.4);
    tpj('#contact').parallax("50%", 0.3);
    tpj('#findus').parallax("50%", 0.1);


    });

    ReplyDelete
    Replies
    1. Hi Zaheer Ahmed, can you help me, i try to use cylce slider and parrallax scroll in one page but it doen't work. Help me plz!!!!!

      Delete

Life insurance policy, bank loans, software, microsoft, facebook,mortgage,policy,