Django - javascript doesn't load on html page

Question

My Django website won't load javascript files, but it does fine for the css part even tho both are in the same Static folder.

base.html:

<head>
    {% load static %}
    <meta charset="UTF-8">
    <link href="{% static 'login/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'login/css/bootstrap-theme.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'login/css/bootstrap-theme.min.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'login/js/bootstrap.js' %}"></script>
    <script src="{% static 'login/js/bootstrap.min.js' %}"></script>

    <title>LOGIN</title>
</head>

settings.py:

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

and here is the path to static folder:

/home/nikola/Desktop/GIA/static

I've searched the google and solutions were pretty generic like something with the urls.py or python manage.py collectstatic (which is for deployment only), and none help. Im clueless.

What seems to be the problem?

Why are you loading both bootstrap.js and bootstrap.min.js? The min.js is the minified version, which is what you should just use. Likewise for the css files too. Just load the min.css versions. Also, if you inspect your page for errors, does the browser flag any errors? — Scratch'N'Purr
– Scratch'N'Purr, Commented Apr 7, 2017 at 17:01
That doesn't really solve the problem, but thank you for the tip. — Tyler Dee
– Tyler Dee, Commented Apr 7, 2017 at 17:04
Im sorry I didn't notice. There is one error yes: Uncaught TypeError: Cannot read property 'style' of null 127.0.0.1/:37 at initHeader (127.0.0.1/:37) at 127.0.0.1/:27 at 127.0.0.1/:206 — Tyler Dee
– Tyler Dee, Commented Apr 7, 2017 at 18:40

Scratch'N'Purr · Accepted Answer · 2017-04-07 18:13:49Z

1

The js files are being loaded. I think you're just not seeing the js plugins working because you haven't loaded the jquery file in your head block. Afterall, bootstrap js plugins depend on jquery to work.

Also, in most practices, js files should be loaded at the end of the HTML file, before the closing </body> tag, because they tend to be big and you want your browser to load the smaller resources first before the js files get loaded. Hence, your structure should look something like:

<html>
    <head>
        <!-- meta stuff here -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- jquery should always load before any other scripts -->
        <link href="css1.css" rel="stylesheet">
        <link href="css2.css" rel="stylesheet">
        ...
        ...
    </head>
    <body>
        ...
        ...
        <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>
    </body>
</html>

edited Apr 7, 2017 at 18:13

answered Apr 7, 2017 at 17:38

Scratch'N'Purr

10.5k2 gold badges39 silver badges54 bronze badges

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

2 Comments

Tyler Dee Over a year ago

It doesn't solve the problem. I tested for jquerry and it appears to be loaded, still the other js doesnt work, even other custom js files I tried to load still do not appear to be working. Btw, when I run the server, I get ""GET /static/login/css/anim.css HTTP/1.1" 304 0" which is the custom js file.

Scratch'N'Purr Over a year ago

anim.css is the js file? Shouldn't it be a css file?

Jinyu Chen · Accepted Answer · 2018-05-22 19:55:44Z

0

make sure DEBUG = True in the settings.py
keep the static folder in each app, when it is development, Django will search static file under each app. only publish to production ENV, the static folder which using python manage.py collectstatic will be config in the web server config. if you are using nginx, etc/nginx/sites-enabled/config_file:
```
root  /.project_home/django_root;

location  /static/ {
           alias  /.project_home/django_root/static/;
}
```

answered May 22, 2018 at 19:55

Jinyu Chen

275 bronze badges

Collectives™ on Stack Overflow

Django - javascript doesn't load on html page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related