jquery on django not being loaded

Question

Good day, I have the following template which contains my JS. However my template on browser is being displayed but without giving me the desire interaction. And when I check the console, I have the following lines of error:

Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:37
ReferenceError: jQuery is not defined custom.js:4:1
ReferenceError: jQuery is not defined jquery.stellar.min.js:2:1
ReferenceError: jQuery is not defined jquery.easing.1.3.js:39:1
Error: Bootstrap's JavaScript requires jQuery bootstrap.js:8:9
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
ReferenceError: django is not defined

I really do not know what I'm doing wrong in this. Any help will be gladly appreciated.

This my code:

 {% load staticfiles %}

    <!DOCTYPE html>
    <html lang="en">
    <head>
       {% include 'website/loaders_scripts/headers.html' %}
        <title>{% block title %}Default title{% endblock %}</title>
    </head>
    <body>
        {% include 'website/components/nav_bar.html' %}
        {% block body_content %}

        {% endblock %}
        {% include 'website/components/footer.html' %}
    <!--LOAD SCRIPTS-->
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/custom.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.stellar.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.easing.1.3.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript"src="{% static 'js/plugins.js' %}"></script>
    <script type="text/javascript"src="{% static 'js/video.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/waypoint.js' %}"></script>
    <script>
        $(function() {
            $(window).alert("Hello")
            var BV = new $.BigVideo({useFlashForFirefox:false});
            BV.init();
            if ((/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent)) {
                BV.show('img/cover.png');
            } else {
                BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{
                    altSource:'http://video-js.zencoder.com/oceans-clip.ogv'
                });
            }
            BV.getPlayer().volume(0);

            $('body').on('click', '.mute.muted', function(){
                BV.getPlayer().volume(0.8);
                $(this).removeClass('muted').addClass('unmuted');
                return false;
            });

            $('body').on('click', '.mute.unmuted', function(){
                BV.getPlayer().volume(0);
                $(this).removeClass('unmuted').addClass('muted');
                return false;
            });
        });
    </script>

    </body>
    </html>

score 1 · Accepted Answer · answered Dec 05 '15 at 06:12

1

You need to load jquery.js before bootstrap.js.

<!-- First load jquery.js -->
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>

<!-- Now load bootstrap.js-->
<script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>

answered Dec 05 '15 at 06:12

xyres

20,487
3
56
85

it's worked but i'm seeing this warning, don't know what is it for: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0 mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create bootstrap.js:34:415 Use of getPreventDefault() is deprecated. Use defaultPrevented instead. – Slang I'mma talk Dec 05 '15 at 06:25
@SlangI'mmatalk That message is shown because you don't have a jquery source map file. See this question for complete explanation and solution: http://stackoverflow.com/q/18365315/ – xyres Dec 05 '15 at 06:37

jquery on django not being loaded

1 Answers1