Question

I have this piece of code that works fine in the webpage:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
    $(function(){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/'
        });
    });
</script>
<!--<script src="prototype.js"></script>-->

However, as soon as I uncomment The prototype.js line it gives an error:

Uncaught TypeError: Cannot call method ‘infiniteCarousel’ of null.

The prototype.js file is from http://prototypejs.org/ and I’m using it for some other function. I have Googled a lot but am unable to come up with a solution – how do I solve this?

Answer 1

Your Prototype.js library is taking over the $ global variable. You can assign the $ variable to jQuery within the scope of your document.ready shortcut in this way:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
    $(function($){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/'
        });
    });
</script>
<!--<script src="prototype.js"></script>-->

The $(document).ready() function, and its shortcut $(function(){}), sends the jQuery factory function as the first argument to its callback. Naming that argument $ will scope a local $ variable as jQuery within that function.

In the future, I suggest bringing jQuery in after prototype, and using the jQuery.noConflict method to relinquish jQuery’s control of $. You can then assign the $ function back to jQuery only inside functions where it’s necessary, using the IIFE wrapper:

// prototype code using prototype's $ out here
(function($){
    // jQuery code using jQuery's $ goes here
}(jQuery));

In this particular case, you don’t need to do that because the $(document).ready() method already does it for you. But you should grow used to that tool.

And you should replace Prototype. 🙂