CODEWITHSUNDEEP
javascripthtmldjango
Alvaro Marin
Alvaro Marin

Reputation: 65

How do you import a js file using {% load staticfiles%} in a base html template

Using Django {% load staticfiles %} I'm trying to load an app.js file in my base.html template.

I've seen several questions on StackOverflow about this and I also tried to follow this tutorial: https://www.techiediaries.com/javascript-tutorial/ but no of them actually helped with my issue.

It seems strange as well because on dev tools I see a 200 GET on the static/js/js.app and when I actually open the path the javascript is there.

Additionally, when I put the js code in a at the end of the body it seems to work. But I want to load the js from a file.

Below is the latest that I've tried, but still no luck.

base.html

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'js/app.js' %}" rel="stylesheet">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">


<body>

<div class="container">
    {% block content %}
    {% endblock content %}
</div>


<!-- jquery -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
<!-- jquery -->
</body>
</html>

Settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Upvotes: 0

Views: 3830

Answers (2)

Paolo
Paolo

Reputation: 853

Put the following script after the body tag.

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

Why? When loading JavaScript files, it tends to fall under one of two cases.

  1. The Javascript file contains functions which are needed while the page is loading OR
  2. The Javascript file contains functions which should be used after the page is loading.

Conclusion
If the JS file contains functions referencing HTML elements then you should put it after the body tag so the page's DOM elements can finish loading first before the script. Else, putting it in the head works as well.

P.S - You should also consider performance, as there is a difference in that aspect when importing JS files in the head and after the body

Upvotes: 3

Alvaro Marin
Alvaro Marin

Reputation: 65

Adding <script type="text/javascript" src="{% static 'js/app.js' %}"></script> below my </body> fixed the problem I had with the js file not loading.

Upvotes: 0

Related Questions