I'm having trouble applying a js file inside my django template

JREMIROMERO · July 21, 2023, 1:46am

I’m learning the thing with Django and I’m trying to adapt a bootstrap template for the index page

I have it as follows

At home.html

<html lang="en">
<head>
  <meta charset="utf-8">
  
 
  

  <title>{{title}}</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="{% static 'lib/AdminLTE-3.2.0/plugins/fontawesome-free-6.4.0/css/all.min.css' %}">
  <link rel="stylesheet" href="{% static 'lib/AdminLTE-3.2.0/css/adminlte.min.css' %}">
  <script src="{% static 'lib/AdminLTE-3.2.0/plugins/jquery/jquery.min.js' %}"></script>
  
  <script src="{% static 'lib/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.min.js' %}"></script>
  <script src="{% static 'lib/AdminLTE-3.2.0/js/adminlte.min.js' %}"></script>
  <script src="{% static 'lib/sweetalert2-9.10.0/sweetalert2.all.min.js' %}"></script>
  <script src="{% static 'js/functions.js' %}"></script>


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


{% block body %}

{% endblock %}
</html>

In index.html

{% extends 'home.html' %}

{% load static %}

{% block head %}
    
<link rel="shortcut icon" type="image/x-icon" href="{% static 'homepage/images/favicon.png' %}" />
<link rel="stylesheet" href="{% static 'homepage/plugins/themefisher-font/style.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/bootstrap/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'homepage/plugins/lightbox2/css/lightbox.min.css' %}">  
<link rel="stylesheet" href="{% static 'homepage/plugins/animate/animate.css' %}">  
<link rel="stylesheet" href="{% static 'homepage/plugins/slick/slick.css' %}">
<link rel="stylesheet" href="{% static 'homepage/css/style.css' %}">
<script src="{% static 'homepage/plugins/jquery/jquery.min.js' %}"></script>  
<script src="{% static 'homepage/plugins/parallax/jquery.parallax-1.1.3.js' %}"></script>  
<script src="{% static 'homepage/plugins/lightbox2/js/lightbox.min.js' %}"></script>  
<script src="{% static 'homepage/plugins/slick/slick.min.js' %}"></script>  
<script src="{% static 'homepage/plugins/filterizr/jquery.filterizr.min.js' %}"></script>
<script src="{% static 'homepage/plugins/smooth-scroll/smooth-scroll.min.js' %}"></script>  
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"></script>
<script src="{% static 'homepage/plugins/google-map/gmap.js' %}"></script>  
<script src="{% static 'homepage/js/script.js' %}"></script>


{% endblock %}
{% block body %}

<body id="body">


  <div id="preloader">
    <div class='preloader'>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>


{% include 'header.html' %}

{% include 'principal.html' %}


<section class="service-2 section">
  <div class="container">
    <div class="row justify-content-center">

      <div class="col-lg-6">
        <!-- section title -->
        <div class="title text-center">
          <h2>What Do We Offer</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Voluptates, earum. </p>
          <div class="border"></div>
        </div>
        <!-- /section title -->
      </div>
    </div>
    <div class="row">

      <div class="col-md-4 text-center d-none d-md-block">
        <img loading="lazy" src="{% static 'homepage/images/about/member.jpg' %}" class="img-fluid inline-block" alt="">
      </div>
      <div class="col-md-8">
        <div class="row text-center">
          <div class="col-md-6 col-sm-6">
            <div class="service-item">
              <i class="tf-ion-ios-alarm-outline"></i>
              <h4>Time Management</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
            </div>
          </div><!-- END COL -->
          <div class="col-md-6 col-sm-6">
            <div class="service-item">
              <i class="tf-ion-ios-briefcase-outline"></i>
              <h4>Marketing Ideas</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
            </div>
          </div><!-- END COL -->
          <div class="col-md-6 col-sm-6">
            <div class="service-item">
              <i class="tf-ion-ios-email-outline"></i>
              <h4>Mail Support</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
            </div>
          </div><!-- END COL -->
          <div class="col-md-6 col-sm-6">
            <div class="service-item">
              <i class="tf-ion-ios-locked-outline"></i>
              <h4>Secure System</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
            </div>
          </div><!-- END COL -->
        </div>
      </div>
    </div> <!-- End row -->
  </div> <!-- End container -->
</section> <!-- End section -->

<!--
Start About Section
==================================== -->
<section class="about-2 section" id="about">
    <div class="container">
        <div class="row justify-content-center">
            <!-- section title -->
            <div class="col-lg-6">
                <div class="title text-center">
                    <h2>We Are Bingo Agency</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam reprehenderit accusamus labore iusto,
                        aut, eum itaque illo totam tempora eius.</p>
                    <div class="border"></div>
                </div>
            </div>
            <!-- /section title -->
        </div>

        <div class="row">

            <div class="col-md-6 mb-4 mb-md-0">
                <img loading="lazy" src="{% static 'homepage/images/about/about-2.png' %}" class="img-fluid" alt="">
            </div>
            <div class="col-md-6">
                <ul class="checklist">
                    <li>Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem laca quam venenatis vestibulum.</li>
                    <li>Aenean quam. Pellentesque ornare sem laca quam venenatis vestibulum.</li>
                    <li>Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem laca quam venenatis vestibulum.</li>
                    <li>Etiam porta sem multipage evint landing magna mollis euismod a pharetra augue.</li>
                    <li>Aenean quam. Pellentesque ornare sem laca quam venenatis vestibulum.</li>
                </ul>
                <a href="about.html" class="btn btn-main mt-20">Learn More</a>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
</section> <!-- End section -->

<!--
Start Call To Action
==================================== -->
<section class="call-to-action section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-8 text-center">
                <h2>Let's Create Something Together</h2>
                <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicudin bibendum auctor, nisi elit consequat ipsum,
                    nesagittis sem nid elit. Duis sed odio sitain elit.</p>
                <a href="contact.html" class="btn btn-main">Contact Us</a>
            </div>
        </div> <!-- End row -->
    </div> <!-- End container -->
</section> <!-- End section -->

<!--
Start Counter Section
==================================== -->
<section class="counter-wrapper section-sm">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 col-lg-8 text-center">
                <div class="title">
                    <h2>Award-Winning Agency</h2>
                    <p>Vestibulum nisl tortor, consectetur quis imperdiet bibendum, laoreet sed arcu. Sed condimentum iaculis ex, in faucibus lorem accumsan non. Donec mattis tincidunt metus. Morbi sed tortor a risus luctus dignissim.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- first count item -->
            <div class="col-md-3 col-sm-6 col-xs-6 text-center ">
                <div class="counters-item">
                    <i class="tf-ion-ios-alarm-outline"></i>
                    <div>
                        <span class="counter" data-count="150">0</span>
                    </div>
                    <h3>Happy Clients</h3>
                </div>
            </div>
            <!-- end first count item -->

            <!-- second count item -->
            <div class="col-md-3 col-sm-6 col-xs-6 text-center ">
                <div class="counters-item">
                    <i class="tf-ion-ios-analytics-outline"></i>
                    <div>
                        <span class="counter" data-count="130">0</span>
                    </div>
                    <h3>Projects completed</h3>
                </div>
            </div>
            <!-- end second count item -->

            <!-- third count item -->
            <div class="col-md-3 col-sm-6 col-xs-6 text-center ">
                <div class="counters-item">
                    <i class="tf-ion-ios-compose-outline"></i>
                    <div>
                        <span class="counter" data-count="99">0</span>
                    </div>
                    <h3>Positive feedback</h3>

                </div>
            </div>
            <!-- end third count item -->

            <!-- fourth count item -->
            <div class="col-md-3 col-sm-6 col-xs-6 text-center ">
                <div class="counters-item kill-border">
                    <i class="tf-ion-ios-bolt-outline"></i>
                    <div>
                        <span class="counter" data-count="250">0</span>
                    </div>
                    <h3>Cups of Coffee</h3>
                </div>
            </div>
            <!-- end fourth count item -->
        </div> <!-- end row -->
    </div> <!-- end container -->
</section> <!-- end section -->


{% include 'testimonial.html' %}
{% include 'blog.html' %}
{% include 'footer.html' %}


</body>

{% endblock %}

in testimonial.html

{% load static %}
{% block head %}
{% endblock %}
<section class="testimonial section" id="testimonial">
    <div class="container">
        <div class="row">               
            <div class="col-lg-12">
                <!-- testimonial wrapper -->
                <div class="testimonial-slider">
                    <!-- testimonial single -->
                    <div class="item text-center">
                        <i class="tf-ion-chatbubbles"></i>
                        <!-- client info -->
                        <div class="client-details">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nulla, soluta dolorum. Eos earum, magni asperiores, unde corporis labore, enim, voluptatum officiis voluptates alias natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quia?</p>
                        </div>
                        <!-- /client info -->
                        <!-- client photo -->
                        <div class="client-thumb">
                            <img loading="lazy" src="{% static 'homepage/images/client-logo/clients-1.jpg' %}" class="img-fluid" alt="">
                        </div>
                        <div class="client-meta">
                            <h3>William Martin</h3>
                            <span>CEO , Company Name</span>
                        </div>
                        <!-- /client photo -->
                    </div>
                    <!-- /testimonial single -->
            
                    <!-- testimonial single -->
                    <div class="item text-center">
                        <i class="tf-ion-chatbubbles"></i>
                        <!-- client info -->
                        <div class="client-details">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nulla, soluta dolorum. Eos earum, magni asperiores, unde corporis labore, enim, voluptatum officiis voluptates alias natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quia?</p>
                        </div>
                        <!-- /client info -->
                        <!-- client photo -->
                        <div class="client-thumb">
                            <img loading="lazy" src="{% static 'homepage/images/client-logo/clients-2.jpg' %}" class="img-fluid" alt="">
                        </div>
                        <div class="client-meta">
                            <h3>Emma Harrison</h3>
                            <span>CEO , Company Name</span>
                        </div>
                        <!-- /client photo -->
                    </div>
                    <!-- /testimonial single -->
                
                    <!-- testimonial single -->
                    <div class="item text-center">
                        <i class="tf-ion-chatbubbles"></i>
                        <!-- client info -->
                        <div class="client-details">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nulla, soluta dolorum. Eos earum, magni asperiores, unde corporis labore, enim, voluptatum officiis voluptates alias natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quia?</p>
                        </div>
                        <!-- /client info -->
                        <!-- client photo -->
                        <div class="client-thumb">
                            <img loading="lazy" src="{% static 'homepage/images/client-logo/clients-3.jpg' %}" class="img-fluid" alt="">
                        </div>
                        <div class="client-meta">
                            <h3>Alexander Lucas</h3>
                            <span>CEO , Company Name</span>
                        </div>
                        <!-- /client photo -->
                    </div>
                    <!-- /testimonial single -->
                </div>
            </div>      <!-- end col lg 12 -->
        </div>      <!-- End row -->
    </div>       <!-- End container -->
</section>    <!-- End Section -->

I am trying to section, clean and customize step by step the index template.html but the problem is in a function that I have inside a ‘homepage/js/script.js’ file

(function ($) {
  'use strict';

  /* ========================================================================= */
  /*    Page Preloader
  /* ========================================================================= */
  $(window).on('load', function () {
    $('#preloader').fadeOut('slow', function () {
      $(this).remove();
    });
  });


  // navbarDropdown
    if ($(window).width() < 992) {
        $('#navigation .dropdown-toggle').on('click', function () {
            $(this).siblings('.dropdown-menu').animate({
                height: 'toggle'
            }, 300);
        });
  }
  
  //Hero Slider
  $('.hero-slider').slick({
    autoplay: true,
    infinite: true,
    arrows: true,
    prevArrow: '<button type=\'button\' class=\'prevArrow\'></button>',
    nextArrow: '<button type=\'button\' class=\'nextArrow\'></button>',
    dots: false,
    autoplaySpeed: 7000,
    pauseOnFocus: false,
    pauseOnHover: false
  });

/*BELOW IS THE PROBLEM!!!!!!!!!!!!!!!!*/
 $('.testimonial-slider').slick({
    infinite: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000
  });

  $('.hero-slider').slickAnimation();

  /* ========================================================================= */
  /*    Portfolio Filtering Hook
  /* =========================================================================  */
  // filter
  setTimeout(function(){
    var containerEl = document.querySelector('.filtr-container');
    var filterizd;
    if (containerEl) {
      filterizd = $('.filtr-container').filterizr({});
    }
  }, 500);

  /* ========================================================================= */
  /*    Testimonial Carousel
  /* =========================================================================  */
  //Init the slider



  /* ========================================================================= */
  /*    Clients Slider Carousel
  /* =========================================================================  */
  //Init the slider
  $('.clients-logo-slider').slick({
    infinite: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: true,
        dots: false
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false
      }
    }
    ]
  });

  /* ========================================================================= */
  /*    Company Slider Carousel
  /* =========================================================================  */
  $('.company-gallery').slick({
    infinite: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: true,
        dots: false
      }
    },
    {
      breakpoint: 667,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        arrows: false
      }
    }
    ]
  });

  /* ========================================================================= */
  /*    On scroll fade/bounce effect
  /* ========================================================================= */
  var scroll = new SmoothScroll('a[href*="#"]');

  // -----------------------------
  //  Count Up
  // -----------------------------
  function counter() {
    var oTop;
    if ($('.counter').length !== 0) {
      oTop = $('.counter').offset().top - window.innerHeight;
    }
    if ($(window).scrollTop() > oTop) {
      $('.counter').each(function () {
        var $this = $(this),
          countTo = $this.attr('data-count');
        $({
          countNum: $this.text()
        }).animate({
          countNum: countTo
        }, {
          duration: 1000,
          easing: 'swing',
          step: function () {
            $this.text(Math.floor(this.countNum));
          },
          complete: function () {
            $this.text(this.countNum);
          }
        });
      });
    }
  }
  // -----------------------------
  //  On Scroll
  // -----------------------------
  $(window).scroll(function () {
    counter();

    var scroll = $(window).scrollTop();
    if (scroll > 50) {
      $('.navigation').addClass('sticky-header');
    } else {
      $('.navigation').removeClass('sticky-header');
    }
  });

})(jQuery);

In the marked marker, that js function of .testimonial-slider is not executed

On the other hand, if I place that function within testimonial.html if it works for me, I do not understand why.

I appreciate your help, I am new to Django and was not familiar with javascript.

xaleel · July 21, 2023, 4:33pm

My guess here would be that the script in homepage/js/script.js starts executing before the all the HTML elements are loaded. If that’s the case you can either

Load the script after elements are loaded, i.e. putting
<script src="{% static 'homepage/js/script.js' %}"></script> after {% include 'testimonial.html' %}
Force the script to load AFTER the HTML has loaded by moving the code inside $(window).on('load', function () { ....

xaleel · July 22, 2023, 7:06am

Also I just noticed that you have your Google API key in the code, which is not good practice. You can use environment variables - reading it in views.py and passing it as context.
Also I’d highly suggest disabling this key and getting a new one since this one is public now in the forum and anyone can use it, costing you.

Topic		Replies	Views
My Django dont recognize JS codes Using Django	1	2808	October 20, 2021
How to inject js to template ? Mystery Errors	1	314	July 13, 2023
Javascript file incorrect? Django Using Django	5	460	February 24, 2021
Javascript file make css not to work in django Using Django	8	4323	December 29, 2021
importing jquery file in django template Django Internals	6	3689	April 19, 2022

I'm having trouble applying a js file inside my django template

Related Topics