What is jQuery Confilt Error and How to Resolve it?

jQuery is very important from the sense of websites / blogs be'coz without jQuery we can make our blog unique and also not give the special effects like sliding, dropdown effect etc and many other important things but as you know that we can't install the jQuery 2 times in one single website and when we do this, our effects OR some widgets don't work OR many things which is very important for us they also don't work and in this situation we can't hide last jQuery and not also add the new jQuery. Many times it happens that when we are installing a JavaScript code and that code might not work and you get a error. So, here we are trying to say just about What is this and How can you resolve it?

What is jQuery Confilt?

When we put OR install 2 jQuery plugins together then our site doesn't work properly and browser shows us some error in our website, that situation is called jQuery Confilt.


Put 2 jQuery at a same time
In this below code we put 2 jQueries at a same time and they confilt between them.

<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<!--slide show-->
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<link rel="stylesheet" href="css/slideshow.css" type="text/css" />

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/backgroundslider.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>

<script type="text/javascript">
          window.addEvent('domready',function(){
            var obj = {
                wait: 2000,
                effect: 'fade',
                duration: 1000,
                loop: true,
                thumbnails: true,
                backgroundSlider: true,
                onClick: function(i){}
            }
            show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);
            show.play();
        });
</script>

<!--Contact Slide-->
<link type="text/css" href="css/reset_contact.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

When we remove 1 of the plugin code. It works, but when we put in 2 jQuery together, just 1 of jquery works well.

Example 1:

Solution

• In above jQuery we used two tools like; MooTools and jQuery.

<script type="text/javascript" src="js/mootools.js"></script>
...
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

•  Both libraries should use the $ (symbol) shorthand and we need to setup one or the other to not-use $ to avoid cross pollination of above code. Basically we call noConflict() so:

 jQuery.noConflict();

• and then in all jQuery code, we have to use jQuery in place of $
• $('foo').bar();   becomes   jQuery('foo').bar();

Hope You will get it. 

Example 2:

 This is the code

$(document).ready(function(){
        $(".trigger").click(function(){
                $(".panel").toggle("fast");
                $(this).toggleClass("active");
                return false;
        });
});

Solution 1:

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

$(document).ready(function(){
        $(".trigger").click(function(){
                $(".panel").toggle("fast");
                $(this).toggleClass("active");
                return false;
        });
});

Solution 2:
This method usually runs into the same problems as the method 1 we used above. For some reason it does not always work or other scripts that are part of the same function no longer recognizes it, therefore does not render or execute it as intended.

var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

Solution 3: 
This is the best method that has proven to put this conflict to bed. Simple and effective, we are just wrapping the script by enclosing it with "(function(Dollar Sign){" and ending it with "})(jQuery);"

(function($){
    $(document).ready(function(){
            $(".trigger").click(function(){
                    $(".panel").toggle("fast");
                    $(this).toggleClass("active");
                    return false;
            });});
    })(jQuery);

 So, Both examples are quite same.