1

Could anyone explain the jQuery no conflict mode to me once and for all. From what I have read, it will resolve issues where jquery scripts are conflicting, but I'm not sure how to implement it and what conflicts it's resolving?

I am using a lot of scripts here which have accumlated over time. Now however, it is a bit of a mess and I wondering if anyone could advise me as to how to get rid of any conflict issues between the scripts.

Currently, the 'datepicker' script won't work. However, if I move the 'datepicker' further up the page, it does work, but then something else doesn't and I have tried every combination and cannot get all the scripts working all at one time.

Here are all my scripts (I removed any html or css as want to make this as clear as possible). Maybe some can be grouped together to make it all a bit tidier? Would jQuery conflict mode solve these conflict issues?

My code is below:

<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="/scripts/libs/modernizr-2.5.3.min.js"></script>

<script src="/imageswapaudio.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
$('.menuitem img').animate({width: 155, 'padding-top' : 100}, 0);
        $('.menuitem').mouseover(function(){
                gridimage = $(this).find('img');
            gridimage.stop().animate({width: 200, 'padding-top': 0}, 500);
            }).mouseout(function(){
                gridimage.stop().animate({width: 155, 'padding-top':  100}, 300);
        });
    }); 
</script>

<script src="colorbox/jquery.colorbox.js"></script>
<script>
        $(document).ready(function(){
                                                            //Examples of how to assign the Colorbox event to elements
                                                             $(".group1").colorbox({rel:'group1'});
                                                             $(".group2").colorbox({rel:'group2', transition:"fade"});
                                                            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                                                            $(".group4").colorbox({rel:'group4', slideshow:true});
                                                            $(".ajax").colorbox();
                                                            $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
                                                            $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
                                                            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
                                                            $(".inline").colorbox({inline:true, width:"auto"});
                                                            $(".callbacks").colorbox({
                                                                             onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                                                                            onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                                                                            onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                                                                            onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                                                                            onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                                                            });

                                                            $('.non- retina').colorbox({rel:'group5', transition:'none'})
                                                             $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

                                                            //Example of preserving a  JavaScript event for inline calls.
                                                            $("#click").click(function(){
                                                                             $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                                                                            return false;
                                                            });
});
</script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32843811-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +   '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<script>

$(document).ready(function(){

    // at first hide divs
    $(".slidingDiv").hide();
    $(".slidingDiv2").hide();
    $(".slidingDiv3").hide();
    $(".slidingDiv4").hide();
    $(".slidingDiv5").hide();
    $(".slidingDiv6").hide();
    $(".slidingDiv7").hide();
    $(".slidingDiv8").hide();
    $(".slidingDiv9").hide();
    $(".slidingDiv10").hide();
    $(".show_hide").show();

            $('.show_hide').click(function(){
            $(".slidingDiv").slideToggle();
return false;
            });
$('.first_s').live('click', function(){
   $(".slidingDiv2").slideToggle();
    return false;
})
$('.second_s').live('click', function(){
    $(".slidingDiv3").slideToggle();
    return false;
}) 
            $('.third_s').live('click', function(){
    $(".slidingDiv4").slideToggle();
    return false;
})
            $('.fourth_s').live('click', function(){
    $(".slidingDiv5").slideToggle();
    return false;
})
            $('.fifth_s').live('click', function(){
    $(".slidingDiv6").slideToggle();
    return false;
}) 
            $('.sixth_s').live('click', function(){
    $(".slidingDiv7").slideToggle();
    return false;
}) 
            $('.seventh_s').live('click', function(){
    $(".slidingDiv8").slideToggle();
    return false;
})  
            $('.eighth_s').live('click', function(){
   $(".slidingDiv9").slideToggle();
    return false;
})  
            $('.ninth_s').live('click', function(){
    $(".slidingDiv10").slideToggle();
    return false;
   })
  });

</script>

<script src="http://www.paycoservices.co.uk/js/dpicker.js"></script>
<script src="http://www.paycoservices.co.uk/js/dpicker-ui.js"></script>
<script>
$(function() {
$( "#datepicker, #datepicker2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>

<script src="jsImgSlider/themes/3/js-image-slider.js" type="text/javascript"></script>

Below are the errors I'm getting running the Chrome browser console:

GET http://www.paycoservices.co.uk/ahkerrigan-light-webfont.woff 404 (Not Found) Simply-    Umbrella-Registration.asp:215
Resource interpreted as Font but transferred with MIME type application/octet-stream:    "http://www.paycoservices.co.uk/ahkerrigan-light-webfont.ttf". Simply-Umbrella-  Registration.asp:839
GET http://www.paycoservices.co.uk/pt_sans-web-bold-webfont.woff 404 (Not Found) Simply-  Umbrella-Registration.asp:450
Resource interpreted as Font but transferred with MIME type application/octet-stream:   "http://www.paycoservices.co.uk/pt_sans-web-bold-webfont.ttf". Simply-Umbrella-  Registration.asp:839
GET http://www.paycoservices.co.uk/onlineforms/webform/scripts/wufoo.js 404 (Not Found)   Simply-Umbrella-Registration.asp:839
1.  Uncaught TypeError: Object [object Object] has no method 'datepicker' Simply-Umbrella-   Registration.asp:163
[cycle] terminating; zero elements found by selector
James Drinkard
  • 15,342
  • 16
  • 114
  • 137
JFar_13
  • 91
  • 1
  • 4
  • 12
  • 1
    Any error messages in the console? – Jeemusu Jul 30 '13 at 09:27
  • Looking at your site, dpicker.js and dpicker-ui.js seem to have the same contents. Any reason your loading the same library twice? – Jeemusu Jul 30 '13 at 09:37
  • Jeemusu, there is no reason why I was including dpicker.js and dpicker-ui.js, just copied the code as it was from the jQuery site. – JFar_13 Jul 30 '13 at 09:50
  • also Jeemusus, I've updated question with the console errors. – JFar_13 Jul 30 '13 at 09:50
  • so in terms of your answer obecker, how do I implement jQuery.noConflict? I'm still learning... – JFar_13 Jul 30 '13 at 09:56
  • I don't see what could be causing the problem, but your code is all over the place, which makes it hard to debug. I had a go at quickly re-organising your code in a jsbin. I would make an effort to re-organise it yourself, as it will make finding the problems much easier. You may find it even solves it. http://jsbin.com/udiwib/3/edit – Jeemusu Jul 30 '13 at 09:57
  • Thanks for this, it certainly makes things look cleaner and tidier. I guess it is a case of moving things around and see where the issue is. For example if I move the datepicker script up above the colorbox, the colorbox then doesn't work but neither does the date picker so guess it;s trial and error. – JFar_13 Jul 30 '13 at 10:16

3 Answers3

2

jQuery no conflict mode is for situations where you have several javascript libraries included in your page and each of them defines a global variable named $. In this case, jQuery.noConflict() changes the value of $ value back to the old value provided by a different library and you have to use jQuery functions by using the variable jQuery in your code instead of $.

Having said this, if you have included nother library that provides a $ variable, then the no conflict mode could help and you would have to rewrite all usages of $ to jQuery.

obecker
  • 2,132
  • 1
  • 19
  • 23
  • I think I have implemented no conflict mode correctly but same issue unfortunately. Right after the reference to jquery I put and I then replaced every mention of $ with 'jQuery' jsfiddle here http://jsfiddle.net/FCZjc/ – JFar_13 Jul 30 '13 at 10:28
  • You've asked for non conflict mode and I've given an answer to it. I didn't say that it will solve your problem. In your jsfiddle I see no import of the colorbox plugin, so that's why there is an error when you use it. – obecker Jul 30 '13 at 12:08
0

I decided to go for a very simple date picker that doesn't reply on anything so went for this one, which works fine with my other scripts. http://www.splinter.com.au/javascript-date-picker-that-doesnt-sucktm/

JFar_13
  • 91
  • 1
  • 4
  • 12
0

Just know that once you use this jQuery.noConflict() , then you forget about using $ to access Jquery. So instead of doing something like $('div') you do this jQuery('div')

Henry Obiaraije
  • 301
  • 3
  • 10