Jquery From Base.html Not Working In Other Templates In Django

I am working on a django application. With templates in django I created multiple pages with one base template. pages like index.html, about.html and contact.html inherit the code

Solution 1:

i've just resolve such problem - scripts didn't work on extended pages. try in this way:

in your base.html put after loading jquery somethin like that {% block jquery %}{% endblock %}, so the code should be like this:

bottom of base.html

            <!-- End footer Area -->

            <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
            <script src="{% static 'js/jquery-ui.js' %}"></script>
            <script src="{% static 'js/easing.min.js' %}"></script>
            <script src="{% static 'js/hoverIntent.js' %}"></script>
            <script src="{% static 'js/superfish.min.js' %}"></script>
            <script src="{% static 'js/jquery.ajaxchimp.min.js' %}"></script>
            <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
            <script src="{% static 'js/jquery.nice-select.min.js' %}"></script>
            <script src="{% static 'js/owl.carousel.min.js' %}"></script>
            <script src="{% static 'js/mail-script.js' %}"></script>
            <script src="{% static 'js/main.js' %}"></script>

            {% block jquery %}

            {% endblock %}

        </body>
    </html>

then in your extended file on the bottom create jquery block (in your case it could be contact.html. in my case it's going to by create.html:

create.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
            <!-- start banner Area -->
            <section class="about-banner relative">
                <div class="overlay overlay-bg"></div>
                <div class="container">
                    <div class="row d-flex align-items-center justify-content-center">
                         <div class="about-content col-lg-12">
                            <h1 class="text-white">
                                Dodaj
                            </h1>
                            <p class="text-white link-nav"> <a href="{% url 'home' %}">Home </a>  <span class="lnr lnr-arrow-right"></span>  <a href="{% url 'create-flight' %}"> Dodaj </a></p>
                         </div>
                    </div>
                </div>
            </section>
            <!-- End banner Area -->

            <!-- Start create Area -->


{% endblock %}

{% block jquery %}

     <script src="{% static 'products/app.js' %}"></script>

{% endblock %}

it's working nice. before i had errors like: Uncaught ReferenceError: $ is not defined Error

Solution 2:

You are adding your Script in head, that is why it is not loaded. Try adding it below your {% block content %}

eg: Add another block {% block scripts %}{% endblock %}

So you can do something like this:

...

{% block content %}
{% endblock %}
<nav> ... </nav>
<script src="{% static 'js/base.js' %}"></script>
</body>

The functional JS is always placed in body tag.

Hope this helps!