jQuery plugins - is not a function error

544 views Asked by At

I use a number of jQuery plugins on my site (owl carousel for example) which work fine everywhere except one page where I require another script which loads content from another site into an iframe.

On the problem page I am getting errors for all my jQuery plugins, i.e. owl carousel:

$(...).owlCarousel is not a function

I have tried running jQuery in no conflict mode:

jQuery.noConflict();
(function($){
    $(function(){
        $('.carousel').owlCarousel({
            items: 3,
            lazyLoad: true
        });
    });
})(jQuery);

But I still get the same error.

I have double checked my filepaths are correct and the files are being loaded in the correct order. They are:

    <script type="text/javascript" src="mysite.com/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="mysite.com/owl-carousel/owl.carousel.min.js"></script>
    <script type="text/javascript" src="mysite.com/custom.js"></script><!-- call to owl carousel-->

In the body I have a placeholder div for the iframe to be loaded into. Then I include the script for loading the iframe:

<script type="text/javascript" src="mysite.com/iframe-script.js">

And after this some simple javascript config settings for the iframe and that's it.

The iframe script is a few thousand lines unminified and a bit beyond my understanding of javascript but, from what I can tell it uses its own custom variable for referencing jQuery which is why I don't think the issue is a jQuery conflict issue.

jQuery still works in mysite.com/custom.js, i.e. all onclick events fire with no errors. So jQuery is working. Just none of the jQuery plugins I am using.

What is going wrong here?

0

There are 0 answers