CODEWITHSUNDEEP
jquerytwitter-bootstrapcarousel
Dhiral Kaniya
Dhiral Kaniya

Reputation: 2051

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

I am implementing slide show of text with the carousel bootstrap and jQuery. My Code is look like

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-
             scale=1">      
<!--JQuery File -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <!--Logo of website -->
            <link rel="shortcut icon" href="image/logo.jpg">

<!-- BootStrap CSS File-->
            <link href="lib/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS File-->
            <script type="text/javascript" src="lib/js/bootstrap.min.js">
            </script>

<!-- Custome CSS-->
            <link href="lib\css\custome.css"  rel="stylesheet" />
<!-- FA Icons -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


<script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type:'GET',
                url:'Controller.php?user-tweet=true',
                dataType:'json',
                success:function(result){
                    var html_data = '';
                    var i = 0;
                    $.each(result['data'],function(index,data){
                        $('<div class="item"><p>"'+data['text']+'"</p></div>').appendTo('carousel-inner');
                        $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('carousel-inndicators');
                        i++;
                    });
                    $('.item').first().addClass('active');
                    $('carousel-inndicators > li').first().addClass('active');
                    $('#carousel-example-generic').carousel({
                        interval:3000
                    });
                },
                failure: function(){
                    alert(Error);
                }
            });
        });
    </script>
</head>
<body>
     <div class="jumbotron">
        <div class="container">
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators-->
            <ol class="carousel-inndicators">

            </ol>
            <!--Wrapper item -->
            <div class="carousel-inner">
                <!-- Controlls -->
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
       </div>
    </div>
</body>
</html>

In the above code i got an error as

Uncaught TypeError:

$(...).carousel is not a function
at Object.success (home.php:42)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

is there any suggestion what i can do further so i can start my carousel successfully.

Infromation about Controller.php?user-tweet=true; it gives me an array data object with the form of JSON once user is logged in. data object contains two fill. data['text'] and data['image']. Here i am texting with text in carousel. but i got above error.

Upvotes: 1

Views: 7944

Answers (2)

Dhiral Kaniya
Dhiral Kaniya

Reputation: 2051

There were some error in the ajax function in appendTo function. In that function i didn't notice that carousel-indicators is my class or id.

so updated ajax code is...

       $.ajax({
                type:'GET',
                url:'Controller.php?user-tweet=true',
                dataType:'json',
                success:function(result){
                    var html_data = '';
                    var i = 0;
                    $.each(result['data'],function(index,data){
                        console.log(data);
                        $('<div class="item"><p>"'+data['text']+'"</p></div>').appendTo('.carousel-inner');
                        $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators');
                        i++;
                    });
                    $('.item').first().addClass('active');
                    $('.carousel-indicators > li').first().addClass('active');
                    $('#carousel-example-generic').carousel();
                },
                failure: function(){
                    alert(Error);
                }
            });

and there is one another mistake in code which we discussed in the comment with @SchalkKeun comment having extra space.Please be consider that.

Upvotes: 2

saifudeen ni
saifudeen ni

Reputation: 145


I think you should change this code
$('#carousel-example-generic').carousel({}); to
$('.carousel #carousel-example-generic').carousel({});
Check this...

Upvotes: 0

Related Questions