Why do my javascript integration in a django template does not work?
Question
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 class="text">Picture:</p>
<br>
<img class="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.
3 answers
solution1
1 2022-06-06 09:25:04
The solution is as easy as the problem stupid was:
The JS file is laoded but the django template code is not executed. This is probably why its called static files . For people meeting the same problem: create another view which gives back json. Fetch it via Javascript code.
solution2
0 2022-06-02 14:03:20
您应该在静态目录 css,js,img 中创建 3 个子目录 1.您应该将 data_table.js 文件保存在 js 文件夹中..... 2.然后加载静态目录... {% load static %} 3.Include this html文件中的一行
<script type="text/javascript" src="{% static 'js/data_table.js' %}"></script>
solution3
0 2022-06-02 14:17:39
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
}
}
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.