Why do my javascript integration in a django template does not work?-CodePudding

I am really new to django and i am trying to build a small page where a chart with chart.js is shown. I want to load the javascript file static. I created a basic html-file called data_table.html and added a folder static where three files are in: data_table.js, styles.css and a picture bild.jpg. The html file is:

{% load static %}
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="{% static 'styles.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'data_table.js' %}"></script>
    <title>Data viewer</title>
    
</head>
<body>
    <canvas id="myChart" width="200" height="200"></canvas>
    <script>
    </script>
    <p >Picture:</p>
    <br>
    <img  src="{% static 'bild.jpg' %}" alt="My image">
</body>
</html>

The css file and the picture are loaded. The picture is displayed and with the css file i can resize the picture. So that works i guess? The javascripts file looks as follows:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [{% for d in data%}'{{d.label}}',{%endfor%}],
        datasets: [{
            label: '# of Votes',
            data: [{% for d in data%}{{d.data}},{%endfor%}],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

The javascript file seems not to be loaded and no chart is displayed. Surprisingly if i am putting the javascript code in between the empty script tags in the body, the chart is displayed fine. I also tried to put the <script type="text/javascript" src="{% static 'data_table.js' %}"></script> line at the sameplace where the empty script tag is right now. It also does not work. No error is thrown. So what am i doing wrong?

Thank you in forward for your answers. In special if i am just doing a very stupid error.

CodePudding user response：

You should create 3 sub directories inside static directory css,js,img 1.You should save data_table.js file inside js folder..... 2.Then load static directory... {% load static %} 3.Include this line in html file

<script type="text/javascript" src="{% static 'js/data_table.js' %}"></script>

CodePudding user response：

Your javascript file needs to be run after the page is fully loaded. You can either place the js file just before the body tag closes, or add an event listener called DOMContentLoaded, meaning the code will only run after the page is loaded

FIRST APPROACH

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <!-- Place your js file just before body closes, when all elements are loaded -->
        <script type="text/javascript" src="{% static 'data_table.js' %}"></script>
    </body>
</html>

SECOND APPROACH

document.addEventListener('DOMContentLoaded', function()
{
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{% for d in data%}'{{d.label}}',{%endfor%}],
            datasets: [{
                label: '# of Votes',
                data: [{% for d in data%}{{d.data}},{%endfor%}],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });  
});