CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapjquery-ui
Laziale
Laziale

Reputation: 8225

TypeError: jQuery(...).find(...).carousel is not a function

For some reason I'm getting js error that the carousel is not a function although I have all the scripts connected, e.g. jquery.js and bootstrap.js before calling the script.js where I have the carousel function.

I have the code working just fine in the website but when I moved to web app I'm getting that error, although the elements are same.

So in the master page I have this in the header part:

<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/assets/js/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="/assets/js/script.js" type="text/javascript"></script>

All scripts are loaded fine, and once I have the page open I have this exception:

enter image description here

In script.js I have this:

jQuery('myCarousel').find('.carousel').carousel({
    interval: 8000
});

I'll say again, the same structure is working fine in the older website, not sure why its different here.

Update

Html markup generated:

<div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="active item">
                        <div class="title"><h2>header</h2></div>
                        <figure><img src="/assets/images/gallery/YCQE183J8RHACYCHLISF.jpg" alt=""></figure>
                        <div class="carousel-caption"><a href="#">Learn more about our programs. </a><div class="arrow-right"></div></div>
                        </div>
                        <div class="item">
                        <div class="title"><h2>text1</h2></div>
                        <figure><img src="/assets/images/gallery/IB819WTCBL3HRM7NZ2CA.jpg" alt=""></figure>
                        <div class="carousel-caption"><a href="">text3</a><div class="arrow-right"></div></div></div>
                        <div class="item"><div class="title"><h2>text2</h2></div><figure><img src="/assets/images/gallery/6KCDVUKYCAXH91M6MWAU.jpg" alt=""></figure><div class="carousel-caption"><a href="#">text4</a><div class="arrow-right"></div></div></div>

                    </div>
                    <a data-slide="prev" href="#myCarousel" class="carousel-control left"></a>
                    <a data-slide="next" href="#myCarousel" class="carousel-control right"></a>
                </div>

Upvotes: 0

Views: 10929

Answers (2)

Gellie Ann
Gellie Ann

Reputation: 449

In my case, I have to add the code inside the document ready function $( document ).ready(function() { }); and the error went away. Hope it'll help someone.

Upvotes: 2

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

You seem to be missing any carousel script. That will cause the carousel is not a function message. It is not part of jQuery and is only part of boostrap if you have the full version. Otherwise you need to include the bootstrap carousel.js plugin file too. http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Also your selector will not work as myCarousel is an id, so should have been #myCarousel but .carousel is on the same element so find will not match anything under it:

try:

jQuery('#myCarousel.carousel').carousel({
    interval: 8000
});

or better yet (as id selectors are the most efficient) just:

jQuery('#myCarousel').carousel({
    interval: 8000
});

Upvotes: 2

Related Questions