TypeError: $ (...). Carousel is not a function

I know this has been asked for many questions, but the most general answer, that jQuery is not loaded, does not work for me. It seems that my jQuery is loading as expected (version 1.10.2). I'm trying to run the following code (tried it even in the console, so the download problem didn't persist): $('.carousel').on('mouseenter',function(){ $( this ).carousel();})

>


The bootstrap carousel itself works fine. It's just, when I try to initialize it dynamically, it doesn't work. (I just started with angular and bootstrap, so I might be missing something very simple here.) I am using angular js and bootstrap for my application.

EDIT: Here is my html code:

<div class="row" ng-controller="ItemGallery" style="padding-top:30px;">
    <div class="col-md-4 item_card" ng-repeat="item in item_array">
        <a href="{{'/product/id='+item.product_id}}" class="thumbnail">
            <div id="{{'carousel_'+item.product_id}}" class="carousel slide" data-ride="carousel" data-interval="false">
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="{{item.thumbnail}}" alt="{{item.product_title}}" class="img-responsive product-image"/>
                    </div>
                    <div class="item">
                        <img src="{{item.nutrition_thumbnail}}" alt="{{item.product_title}}" class="img-responsive nutri-image"/>
                    </div>

                </div>
            </div>
            <div class="caption post-content">
                <h4 class="h_no_margin">
                    <p class="pull-left title">{{item.product_title.toLowerCase() }}</p>
                    <p class="text-right">${{item.price}}</p>
                </h4>
                <small>
                    {{item.product_desc}}
                </small>
            </div>
        </a>

    </div>

</div>

      

Angular code:

var app = angular.module('item_gallery', []);

app.controller('ItemGallery', function($http, $scope, $location) {
$http.get("/product/list")
.success(function(response) {
    $scope.item_array = response.response;
    });


});

      

I used conversation to take care of addictions.

{
 "name": "nutrinext",
 "version": "0.0.0",
 "dependencies": {
  "angular": "~1.3.1",
  "angular-bootstrap": "~0.11.2",
  "angular-timeago": "~0.1.3",
  "angular-ui-router": "~0.2.11",
  "ngstorage": "~0.3.0",
  "bootstrap": "~3.3.0",
  "bootstrap-markdown": "~2.7.0",
  "jquery": "1.10.2",
  "fastclick": "~1.0.3",
  "fontawesome": "~4.2.0",
  "pubnub": "~3.6.4"
 },
"devDependencies": {},
"resolutions": {
  "angular": "~1.3.1",
  "bootstrap": "~3.3.0"
 }
}

      

+3


source to share


3 answers


I had the same problem. In mine index.html

I was missing including bootstrap.js

, and after adding after it worked.



<script type="text/javascript" src="components/bootstrap/dist/js/bootstrap.js"></script>

      

+8


source


I just figured it out myself.

Step 1-) Find the whole project (ctrl + shift + f) and type carousel ()



Step 2-) Replace everything with carousel

Hope this helps!

-1


source


Try to reorder the tags with materialize.js stuff, it worked for me!

In particular, you must keep this order of scripts in your source code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

      

and not vice versa.

-2


source







All Articles