Django and Loading Javascript

Question

I'm setting up a Bootstrap Carousel working from a Django-powered image database. I have no errors in the console log, jQuery is loading, etc., so I'm definitely missing something painfully obvious. It does not transition to other slides, and the controls are not working either. I have tried loading the carousel library separately, and nothing seems to work. ~~I'm using jQuery 1.11.0 loaded via CDN from Google.~~ I'm using jQuery 1.11.3 served via Static files in Django. The error seems to be in how Django is loading the varied Javascripts, but I'm not savvy enough to determine what the issue is.

ETA:

I am loading bootstrap.min.js after jQuery. I normally have some custom JS running, but I've removed that script for testing.

Here's the Django code generating the carousel:

{% load staticfiles %}
<!DOCTYPE html>
    <html>
        <head>
            <script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
            <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> 
        </head>
        <body>
            {% include "menu.html" %}
            <div class="container-fluid">
                <div class="panel panel-primary shadow-normal">
                    <div class="panel-body">
                        <div id="mycarousel" class="carousel slide">
                            <ol class="carousel-indicators">
                                {% for image in index_carousel %}
                                    {% if forloop.first %}
                                        <li data-target='#mycarousel' class='active' data-slide-to='{{ forloop.counter }}'></li>
                                    {% else %}  
                                        <li data-target='#mycarousel' data-slide-to='{{ forloop.counter }}'></li>
                                    {% endif %} 
                                {% endfor %}
                            </ol>
                        <div class="carousel-inner">
                            {% for image in index_carousel %}
                                {% if forloop.first %}
                                    <div class="item active">
                                {% else %}
                                    <div class="item">
                                {% endif %}
                                <img class="img-responsive" src="{{ image.carousel_image.url }}" alt="Carousel Slide - {{ image.alt_text }}">
                            </div>
                        {% endfor %}
                    </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div> <!-- Carousel -->
            </div>
        </div>
    </div>
    <script type="javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script>
        $(document).ready( function() {
            setTimeout( function() {
                $('#mycarousel').carousel();
            }, 15000)
        });
    </script>
</body>

Here's the generated HTML:

<!DOCTYPE html>
    <html>
        <head>
            <script src="/static/js/jquery-1.11.3.min.js"></script>
            <link rel="stylesheet" href="/static/css/bootstrap.min.css"> 
        </head>
        <body>
            <div class="container-fluid">
                <div class="panel panel-primary shadow-normal">
                    <div class="panel-body">
                        <div id="mycarousel" class="carousel slide">
                            <ol class="carousel-indicators">
                                <li data-target='#mycarousel' class='active' data-slide-to='1'></li>
                                <li data-target='#mycarousel' data-slide-to='2'></li>
                                <li data-target='#mycarousel' data-slide-to='3'></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="img-responsive" src="/media/carousel_images/staff_blogs.png" alt="Carousel Slide - ">
                                </div>
                                <div class="item">
                                    <img class="img-responsive" src="/media/carousel_images/aarp-tax-help-slide_ZznUFS2.png" alt="Carousel Slide - ">
                                </div>
                                <div class="item">
                                    <img class="img-responsive" src="/media/carousel_images/august_book_sale_new.png" alt="Carousel Slide - ">
                                </div>
                            </div>
                            <!-- Controls -->
                            <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div> <!-- Carousel -->
                    </div>
                </div>
            </div>
            <script type="javascript" src="/static/js/bootstrap.min.js"></script>
            <script>
                $(document).ready( function() {
                    setTimeout( function() {
                        $('#mycarousel').carousel();
                    }, 15000)
                });
            </script>
        </body>
    </html>

The error I consistently get is

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

What could be the issue here? All the files are being found, and I've tried timeouts to make sure everything is loaded, but to no avail. I'm running this same setup served via PHP/MySQL, and it works, so the only variable is Django. Is there something I'm missing with loading the static files?

@NikhilBatra - Yes. The js loads as follows - jQuery, then Bootstrap. — slink
– slink, Commented Aug 4, 2015 at 13:08
have you try to set a timeOut to delay the call on your carousel ? — Beauceron
– Beauceron, Commented Aug 4, 2015 at 14:06
@Beauceron - I tried a 1 second timeout, and got the same $(...).carousel() is not a function error. I'll up the time a bit to see if it's just a timing issue. ETA: At 15 seconds, the error remains. — slink
– slink, Commented Aug 4, 2015 at 14:12
You should make a jsfiddle and see if it's work. Maybe something else in the page make your thing doesn't work. — Beauceron
– Beauceron, Commented Aug 4, 2015 at 14:38

KSK · Accepted Answer · 2015-08-04 15:39:17Z

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Please include the above lines, its working fine if I include the above.

edited Aug 4, 2015 at 15:39

answered Aug 4, 2015 at 15:11

KSK

1061 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

KSK Over a year ago

slink Over a year ago

See the modified question - all those files are loaded, though I'm using 1.11.3 on jQuery because of compatibility with other parts of the site.

KSK Over a year ago

Please check by including all the 3 links that I have specified in the comment and revert. Since its working fine if I include those 3 links

slink Over a year ago

That's extremely strange; It works, but why would it work with the files loaded from external sources, but not served from the local static files, as the files are - apart from branding colors in the CSS - exactly the same?

KSK Over a year ago

You might have downloaded different or lower versions of jquery and bootstrap.

|

Collectives™ on Stack Overflow

Django and Loading Javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related