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 --><scriptsrc="https://code.jquery.com/jquery-3.5.0.min.js"integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script><scriptsrc="{% static 'js/jquery-ui.js' %}"></script><scriptsrc="{% static 'js/easing.min.js' %}"></script><scriptsrc="{% static 'js/hoverIntent.js' %}"></script><scriptsrc="{% static 'js/superfish.min.js' %}"></script><scriptsrc="{% static 'js/jquery.ajaxchimp.min.js' %}"></script><scriptsrc="{% static 'js/jquery.magnific-popup.min.js' %}"></script><scriptsrc="{% static 'js/jquery.nice-select.min.js' %}"></script><scriptsrc="{% static 'js/owl.carousel.min.js' %}"></script><scriptsrc="{% static 'js/mail-script.js' %}"></script><scriptsrc="{% 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 --><sectionclass="about-banner relative"><divclass="overlay overlay-bg"></div><divclass="container"><divclass="row d-flex align-items-center justify-content-center"><divclass="about-content col-lg-12"><h1class="text-white">
                                Dodaj
                            </h1><pclass="text-white link-nav"><ahref="{% url 'home' %}">Home </a><spanclass="lnr lnr-arrow-right"></span><ahref="{% url 'create-flight' %}"> Dodaj </a></p></div></div></div></section><!-- End banner Area --><!-- Start create Area -->


{% endblock %}

{% block jquery %}

     <scriptsrc="{% 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><scriptsrc="{% static 'js/base.js' %}"></script></body>

The functional JS is always placed in body tag.

Hope this helps!