CODEWITHSUNDEEP
javascriptpythoncssdjangostatic
Tyler Dee
Tyler Dee

Reputation: 37

Django - javascript doesn't load on html page

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?

Upvotes: 1

Views: 2677

Answers (2)

Jinyu Chen
Jinyu Chen

Reputation: 27

  1. make sure DEBUG = True in the settings.py

  2. 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/;
}

Upvotes: 0

Scratch&#39;N&#39;Purr
Scratch&#39;N&#39;Purr

Reputation: 10399

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>

Upvotes: 1

Related Questions