Correct loading of jquery and usage of extended base.html templates within Django framework

Question

I think this is not very related to Django more to jQuery and html behavior however what is the problem statement:

Using a more or less standard base.html template

base.html

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <meta charset="utf-8">
    {% block stylesheets %}
        <!-- load Stylesheets -->
    {% endblock stylesheets %}

    <title>
        {% block title %}
        Base Title
        {% endblock title%}
    </title>

</head>

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

    <main>
        {% block body %}
        {% endblock %}
    </main>

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

    {% block scripts %}
        <!-- Jquery 3.5.1 CDN -->
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <!-- Popper 1.12.9 CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <!-- Bootstrap 4.0.0 CDN -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    {% endblock %}

    {% block extrascripts %}
    {% endblock %}

</body>
</html>

From this dashboard.html is derived by extension of base.html

{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block body %}
    <div class="navbar navbar-expand justify-content-end">
        some navigation bar content
    </div>
    
        some else stuff

    <div class="container">
        <div class="row" style="margin-top: 1em">
            {% include 'dash_cards/dash_card.html' %}
        </div>
    </div>

       some more content

{% endblock %}

{% block extrascripts %}

{% endblock %}

This works all fine and bootstrap is rendered fine - no jQuery elements are in at the moment for the better readability and easier handling the dash card is in its own file and included into dashboard.html as you can see in above snippet.

The content of dash_card.html is as follows:

<div class="card bg-darker col-md-6 border border-light">
    <!-- A grey horizontal navbar that becomes vertical on small screens -->
    <div class="card-body">
        <canvas id="BVChart" width="75%" data-url="{% url 'url:link' %}"></canvas>
    </div>
    <div class="card-footer">
        <-- some other fancy stuff -->
    </div>
</div>


{% block extrascripts %}
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    <script>
    
some js code to get the BVChart in the dash card canvas

    </script>
{% endblock %}

Question 1: Why do I need to explicitly load jquery twice? Once in the base.html and once in the dash_card.html? If I don't do the jquery code of dash_cards.html is not executed. My approach of all those separate blocks in base.html follows the answer of this question as well as some other using {{block.super}} but non of those works for me

Just to be sure - May somebody pls confirm this - this is not an loading (time) issue as mentioned here?!

Question 2: As the current situation does not work properly (duplicate code) - jQuery must be loaded each time upwards of jquery code - What is the way forward? I just want to load it once and use it along the whole templates...

Thanks to all for your support and your input!

EDIT As requested here is the some js Code to draw the chart... I have too small hands to hold 2 hammers - the reason I asked LOL This (document.ready function) is something I also thought of first but unfortunately this does not work

var ctx = document.getElementById('BVChart').getContext('2d');
var options = $.ajax({
url: $("#BVChart").attr("data-url"),
   async: false,
   dataType: 'json',
   }).responseJSON;

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: options.labels,
        datasets: [{
            label: '# of Votes',
            data: options.data,
            borderColor: "#fff",
            borderWidth: 1
            },
            {
            label: '# of else',
            data: options.data2,
            borderColor: "#999",
            borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {beginAtZero: true}
                }]
            }
        }
});

Louys Patrice Bessette · Accepted Answer · 2021-02-10 00:30:42Z

1

EDIT

Your edit shows a weird ajax request:

var options = $.ajax({
  url: $("#BVChart").attr("data-url"),
  async: false,
  dataType: 'json',
}).responseJSON;

There is no data sent
There is not success callback...

In short, you are sending no data, just resquesting a result... Okay, possible. But there is nothing to handle that plain result.

So what is the purpose of that resquest then?

And what is .responseJSON; ? Don't you have any console error about that?

Why do I need to explicitly load jquery twice?

You should not. Loading jQuery twice in a single page is like holding two hammers in one hand. lol... You just can break things and hurt yourself. :) hahaha

Now... The interesting JS code was not posted:

some js code to get the BVChart in the dash card canvas

I guess you just need to wrap all this code with a document.ready() handler.

document.ready(function(){
  // The unposted code goes here.
}

So it runs when the DOMContentLoaded event has fired (the page completely loaded).

edited Feb 10, 2021 at 0:30

answered Feb 8, 2021 at 22:35

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Prometheus Over a year ago

Hey - just double checked - No there is no error just a warning that it's depreciated.. anyhow - yes its just requesting the json data coming from the Django.view into the Chart function. Here I followed this blog post Example 2 I'm a js noob and its pretty hard for me - what would be your proposal?

Louys Patrice Bessette Over a year ago

Have a closer look at the home.html part of the example. The success function is executed when the json is received from the ajax request. data is that json response.

Prometheus Over a year ago

Sorry I can't follow here - there is no home.html nor a success function used

Louys Patrice Bessette Over a year ago

I'm talking about the example from the tutorial you mentionned... In example #2, the home.html code.

Prometheus Over a year ago

Ah about that you speak - hmm oh I see Thanks yes and finally also the document.ready function makes sense! Thanks a lot

Collectives™ on Stack Overflow

Correct loading of jquery and usage of extended base.html templates within Django framework

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related