title: jquery - How to resolve two jquery conflict
body: <p>I have a page which includes two jquerys one  for slider other for populate dropdawn.The problem is when I put both of them my jqueries are not working together.What should i do?</p>
  
  <p>My index:</p>
  
  <pre><code>   &lt;!-- JAVASCRIPTs for slider --&gt;  
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/comment-reply.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.quicksand.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.tipsy.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.prettyPhoto.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.cycle.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.anythingslider.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.eislideshow.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.easing.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.flexslider-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.aw-showcase.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/layerslider.kreaturamedia.jquery-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/shortcodes.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.colorbox-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.tweetable.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/slider-layer.js"&gt;&lt;/script&gt;
  
      &lt;!-- JAVASCRIPTs for dropdawn --&gt;  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
  $(document).on('change','.productcategory',function(){
     console.log("hmm its change");
  
    var cat_id=$(this).val();
  
    var div=$('#d').parent(); 
  
  
    var op=" ";
  
    $.ajax({
      type:'get',
      url:'{!!URL::to('findProductName')!!}',
      data:{'id':cat_id},
      success:function(data){
        //console.log('success');
  
        //console.log(data);
  
        console.log(data.length);
  
        op+='&lt;option value="0" selected disabled&gt;&lt;/option&gt;';
  
        for(var i=0;i&lt;data.length;i++){
  
             op+='&lt;option value="'+data[i].id+'"&gt;'+data[i].model+'&lt;/option&gt;';
  
  
       console.log(data[i].model);
         }
  
         div.find('.productname').html(" ");
         div.find('.productname').append(op);
      },
      error:function(){
  
      }
    });
  });
  
    });
    &lt;/script&gt;  
  </code></pre>
  
  <p>I try to add </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     var jQuery = $.noConflict(true);
  &lt;/script&gt;
  </code></pre>
  
  <p>but when add this in the end of bouth script then slider work and dropdown not, and when not add this code for conflict works dropdown and slider doesn't work.</p>
  
  <p>I use next links:</p>
  
  <p><a href="https://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page">Can I use multiple versions of jQuery on the same page?</a></p>
  
  <p><a href="http://jsfiddle.net/PGLVs/" rel="nofollow noreferrer">http://jsfiddle.net/PGLVs/</a></p>
  
  <p>Any ideas of what I'm doing wrong?</p>