CODEWITHSUNDEEP
javascriptjquery
user3762389
user3762389

Reputation: 51

Jquery conflict while attaching Jquery.min.js

I presume the is cause to my problem is a Jquery conflict. Please correct me in the first place if it isn't the case looking at below.

I'm new to Jquery and trying to insert a drop down plug in to a site. The attempt is successful, however an already existing Jquery image slider goes away when the drop down works.

My code looks like below.

Links which relevant to the image slider plug in:

<script src="css/SliderOne/jquery.min.js"></script>
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>

and the links for the dropdown plugin;

<script src="pro_v/jqueryminx.js"></script>
<script src="js/homedrop/jqueryx.selectric.js"></script>
<script>
$(function(){
    $('select, .select').selectric();

    $('.customOptions').selectric({
        optionsItemBuilder: function(itemData, element, index){
            return element.val().length ? '<span class="ico ico-' + element.val() +  '">    </span>' + itemData.text : itemData.text;
        }
    });
});
</script>

When I remove the jqueryminx.js link the image slider works fine. So I tried doing the following as suggested by one of the stakoverflow questions but couldn't get to work.

My attempt as follows. tried to use noConflict;

<script src="css/SliderOne/jquery.min.js"></script>
$.noConflict(true);
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>

and also here.

<script src="pro_v/jqueryminx.js"></script>
$.noConflict(true);
<script src="js/homedrop/jqueryx.selectric.js"></script>
<script>
$(function(){
    $('select, .select').selectric();

    $('.customOptions').selectric({
        optionsItemBuilder: function(itemData, element, index){
            return element.val().length ? '<span class="ico ico-' + element.val() +  '">        </span>' + itemData.text : itemData.text;
        }
    });
});
</script>

Doesn't seems to be working. Any help would be much appreciated. Thank you.

Upvotes: 0

Views: 296

Answers (1)

Petr Chudanic
Petr Chudanic

Reputation: 547

To properly apply noConflict you should put noConflict into the script tags. it will clear $ variable from global scope. You will then reference jquery via jQuery.

<script src="css/SliderOne/jquery.min.js"></script>
<script src="css/SliderOne/jquery.pepperk.js"></script>

<script>
$.noConflict(true);
jQuery(window).load(function() {
jQuery('.blueberry').blueberry();
});
</script>

OR you can use this in this contruct using $ variable internal to ready callback function

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

Upvotes: 1

Related Questions