How to properly load js script into html/djangoTemplate?

Question

Using Django templates, I'm trying to add a countdown in javascript. Putting the script explicitly in HTML does work but it doesn't when loaded. I think I'm close but I can't figure out what is missing :/.

Here is a working piece of code :

<!DOCTYPE html>

<head>
    {% load staticfiles %}
</head>

<body>
{% if remaining_time %}
    <script>
        function startTimer(duration, display) {
            var timer = duration;
            var end = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) {
                    clearInterval(end);
                    document.form_submit_answer.submit()
                }
            }, 1000);
        }

        window.onload = function () {
            var allowed_time_seconds = "{{remaining_time | safe}}",
                display = document.querySelector('#time');
            startTimer(allowed_time_seconds, display);
        };
    </script>
{% endif %}

    {{ current_question.title }}
    <div>
        <form name="form_submit_answer" action="{% url 'assignment_completion' token current_question_num %}"
            method="post">
            {% csrf_token %}
            {{ form }}
            <div>
                {% if next_question %}
                <input type="submit" value="Send your answer and go to the next question">
                {% else %}
                <input type="submit" value="Send your answer and end the assignment">
                {% endif %}
            </div>
        </form>
    </div>

    <div>
        TOKEN : {{ token }}
    </div>

    {% if remaining_time %}
    <div>Time remaining : <span id="time">{{initial_remaining_time}}</span></div>
    {% endif %}
</body>

</html>

But When I remove the script from the HTML and I put it in /static/js/timer.js then make the import in <head>, it doesn't work anymore, the initial_remaining_time is displayed but it is not decremented each second.

Here is my piece of code which is not working :

<head>
    {% load staticfiles %}
    {% if remaining_time %}
    <script src="{ % static 'js/timer.js' % }"></script>
    {% endif %}
</head>

Expected result : Display of the initial time then decrement until 0, at 0, send the form !

In practice when putting timer.js in /static/js/timer.js, only the initial time is displayed and then nothing happens as if the javascript was never loaded and played.

Traceback : (nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI is a token)

[18/Jul/2019 11:12:32] "GET /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/2 HTTP/1.1" 200 1017
Not Found: /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/{ % static 'js/timer.js' % }
[18/Jul/2019 11:12:32] "GET /nkFjLIDrya1BrWd2bqYnq7TC5bpGCRGW3HcDXa6cqYI/%7B%20%%20static%20'js/timer.js'%20%%20%7D HTTP/1.1" 404 2617

score 2 · Accepted Answer · answered Jul 18 '19 at 11:26

2

try this: <script src="{% static 'yourAppName/path/to/app.js' %}">

If it keeps telling you that it can't find that specific file, then you probably haven't correctly configured your settings.py to know where your static directory should be.

answered Jul 18 '19 at 11:26

Keimeno

2,512
1
13
34

Thank you, it's working, I forgot about : `STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), ) ` as answered [here](https://stackoverflow.com/questions/30313314/django-how-to-include-javascript-in-template) Also I had to define a global variable : ``` ``` and use it inside timer.js : ``` window.onload = function () { var allowed_time_seconds = remaining_time_js, display = document.querySelector('#time'); startTimer(allowed_time_seconds, display); }; ``` – Philippe Jul 18 '19 at 11:42

How to properly load js script into html/djangoTemplate?

1 Answers1