jquery - How to resolve two jquery conflict

Question

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?

My index:

   <!-- JAVASCRIPTs for slider -->  
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/comment-reply.js"></script>
    <script type="text/javascript" src="js/jquery.quicksand.js"></script>
    <script type="text/javascript" src="js/jquery.tipsy.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.min.js"></script>
    <script type="text/javascript" src="js/jquery.anythingslider.js"></script>
    <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
    <script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
    <script type="text/javascript" src="js/layerslider.kreaturamedia.jquery-min.js"></script>
    <script type="text/javascript" src="js/shortcodes.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="js/jquery.tweetable.js"></script>
    <script type="text/javascript" src="js/slider-layer.js"></script>

    <!-- JAVASCRIPTs for dropdawn -->  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

$(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+='<option value="0" selected disabled></option>';

      for(var i=0;i<data.length;i++){

           op+='<option value="'+data[i].id+'">'+data[i].model+'</option>';


     console.log(data[i].model);
       }

       div.find('.productname').html(" ");
       div.find('.productname').append(op);
    },
    error:function(){

    }
  });
});

  });
  </script>

I try to add

<script type="text/javascript">
   var jQuery = $.noConflict(true);
</script>

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.

I use next links:

Can I use multiple versions of jQuery on the same page?

http://jsfiddle.net/PGLVs/

Any ideas of what I'm doing wrong?

Only load one version...before any plugins. What version is the first one? — charlietfl, Aug 02 '17 at 14:56
don't use the var name `jQuery` for noConflict, use a one of your own. The noConflict function acts on the `$` var, not on `jQuery` which stays global. If you REALLY need different versions, use something like `var $myJQ = jQuery.noConflict();`. You then have to wrap the code that uses this version with a function with argument like `(function($){ /* the code */ })($myJQ);` if you want to keep a code with `$` inside — Kaddath, Aug 02 '17 at 14:59
Hi Kaddath, can you post example base on my questions, please? I don't understand part with function($) — dev, Aug 02 '17 at 15:01

score 1 · Answer 1 · answered Aug 02 '17 at 15:14

a quick example:

in the head:

<script type="text/javascript" src="/jqueryV1.js"></script>
<script type="text/javascript">
    var $myJQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jqueryV2.js"></script>
<!-- the version 2 in now in $ while the 1 is in $myJQ -->

code that uses version 2 can keep the global $.

Now in the rest of your code, you could simply replace all the $ by $myJQ where the version 1 is used, but it means rewriting all, what you can do instead is to use an argument that acts as a local var, to be able to keep $ in the code that uses version 1:

(function($){
    //inside this function, using $ means using the global $myJQ
    $('#selector')...
})($myJQ);

@dev note that with both these solutions, you should not use `jQuery` in your code, but `$`, or else it will always refer to the last one loaded — Kaddath, Aug 02 '17 at 15:59

amit wadhwani · Accepted Answer · 2017-08-02T15:35:35.147

Basically you should release release $ or jQuery variable for newer versions so add noConflict between both versions as below. This will make $ alias available for newer version.

<script src"olderversion"></script>

<script type="text/javascript">
     jQuery.noConflict();
</script>

<script src"newerversion"></script>

If in case you have to call any plugin with lot of lines using $ or jQuery using old versions you can folow below approach.

jQuery.noConflict();
(function( $ ) {// if you want to use $
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

// Other code using $ as an alias to the other library

jQuery.noConflict();
    (function( jQuery ) {// if you want to use $
      $(function() {
        // More code using jQuery  as alias to jQuery
      });
    })(jQuery);

Please mark it as answer if it meets your requirement.

Still same problem, in inspect element in console i got error: Uncaught TypeError: jQuery(...).layerSlider is not a function — dev, Aug 02 '17 at 15:39

jquery - How to resolve two jquery conflict

2 Answers2