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

Keimeno · Accepted Answer · 2019-07-18 11:26:55Z

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, 2019 at 11:26

Keimeno

2,6591 gold badge17 silver badges35 bronze badges

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

1 Comment

Philippe Over a year ago

Thank you, it's working, I forgot about : STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), ) as answered here Also I had to define a global variable : ``` <script> var remaining_time_js = "{{ remaining_time | safe}}"; </script> ``` 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); }; ```

Collectives™ on Stack Overflow

How to properly load js script into html/djangoTemplate?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related