CODEWITHSUNDEEP
jqueryhtmlcssdjangotwitter-bootstrap
Sashaank
Sashaank

Reputation: 964

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 from base.html. Inside the base.html template is code for a navbar.

base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>

  <!-- fonts -->
  <link href="https://fonts.googleapis.com/css?family=Anton|Open+Sans&display=swap" rel="stylesheet">

  <!-- base.css -->
  <link rel="stylesheet" href="{% static 'css/base.css' %}">

  <!-- base.js -->
  <script src="{% static 'js/base.js' %}"></script>

  <title>{% block title %}base{% endblock %}</title>

  {% block header %}{% endblock %}
</head>

<body>

  {% block content %}
  {% endblock content %}

  <!-- navbar -->
  <nav class="navbar fixed-top navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link hover_effect" href="{% url 'home' %}">Home</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link hover_effect" href="{% url 'about' %}">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link hover_effect" href="{% url 'contact_us' %}">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

When viewed in a browser the navbar by default has no background color, but when scrolled down, background-color is added to the navbar. I achieve this with jquery.

base.js

$(document).ready(function() {
  $('.nav-link').css('color', '#F2B705')
})

$(document).ready(function(){
    var scroll_pos = 0;
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop();
        if(scroll_pos < 80) {
          $(".navbar").css('background', 'transparent');
          $('.nav-link').css('color', '#F2B705')
        }

        if(scroll_pos > 100) {
            $(".navbar").css('background', 'linear-gradient(to right, #ffb347, #ffcc33)');
            $('.nav-link').css('color', '#141259')
        }
    });
});

The problem I am facing is when I inherit the base template in other pages, I want the jquery to also work on all pages. I am able to view the navbar itself in all the pages but for some weird reason, the base.js jquery code only works in the index.html template and not in the other templates. Below is the code for index.html and contact.html

index.html

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}Home{% endblock title %}

{% block header %}

<!-- index.css -->
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<!-- index.js -->
<script src="{% static 'js/index.js' %}"></script>

{% endblock header %}

{% block content %}
...
{% endblock content %}

contact.html

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}Contact Us{% endblock title %}

{% block header %}

<!-- contact.css -->
<link rel="stylesheet" href="{% static 'css/contact.css' %}">

<!-- contact.js -->
<script src="{% static 'js/contact.js' %}"></script>

{% endblock header %}

{% block content %}
...
{% endblock content %}

The CDNs for bootstrap and jquery is given only inside the base template. I tried adding the CDNs to the other templates as well, but that does not work. While the bootstrap part of the code works fine in all the pages even though the CDN only exists in the base template, the jquery code inside base.js only works in index.html template and not in other pages.

This is one link I found that had a similar problem. But the solutions for this question does not work for me

Upvotes: 0

Views: 1387

Answers (2)

Croolic
Croolic

Reputation: 161

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

Upvotes: 1

Harshit verma
Harshit verma

Reputation: 548

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!

Upvotes: 0

Related Questions