Hello everyone. my django project doesnt recorgnize my js file, like its invisible. but its able to see css and images which are all in the same static folder. The thing is if I directly place my js in the html, it works but I want it in the external sheet. I have checked the configuration and everything seem ok. Please help out .
Hello there and welcome!
It would be useful to know how are you running your project, and what are your templates, views and static files involved. Otherwise you’re likely to not get any help.
Thank you for the response. I am not able to post my templates due to some restrictions on the django platform but I have gotten you some portions of my project. I hope it is enough to get me the help I need.
(Attachment New Microsoft Word Document.pdf is missing)
Sorry, i don’t see any documents here.
Can’t you just copy paste the code here?
Welcome @Simmydjango !
As mentioned above, please post the template that is supposed to load this js by copy/pasting the text of the template into your post, surrounded between lines of three backtick - ` characters. This means you’ll have a line of ```, then your template, then another line of ```.
Do not post images or other document types here.
This is my base template: <!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Home{% endblock %}</title>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Django Python stylesheet link -->
<link rel="stylesheet" href="{% static 'CSS/style.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<div class="logo-container">
{% block brand_Logo %}
<img src="{% static 'IMAGES/zion.png' %}" alt="Logo" class="logo-image">
{% endblock %}
</div>
<div class="brand-container">
{% block brand_label %}
<h3 class="brand-text">Open School</h3>
{% endblock %}
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
{% block nav_menus %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Create Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Student Application</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Staff Application</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
{% endblock %}
{% if authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="body_container">
{% block content %}
{% endblock %}
</div>
<!-- Your content goes here -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
{% block scripts %}
<script type="text/javascript" src="{% static 'js/index.html' %}"></script>
{% endblock %}
</body>
</html>
this is the extended login template: {% extends "base.html" %}
{% load static %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="login-form">
<h2>Login</h2>
<form action="/login" method="post">
{% csrf_token %}
<label>User Role:</label>
<div class="form-group">
<label for="admin">Admin</label>
<input type="radio" id="admin" name="role" value="admin" required>
<label for="staff">Staff</label>
<input type="radio" id="staff" name="role" value="staff" required>
<label for="student">Student</label>
<input type="radio" id="student" name="role" value="student" required>
</div>
<div class="form-group" id="admin-form" style="display: none;">
<label for="admin-sch_code">School Code:</label>
<input type="text" id="admin-sch_code" name="sch_code" placeholder="Enter your School Code" required>
<label for="admin-username">Username:</label>
<input type="text" id="admin-username" name="username" placeholder="Enter your username" required>
<div class="form-group" id="admin-password-form" style="display: none;">
<label for="admin-password">Password:</label>
<input type="password" id="admin-password" name="password" placeholder="Enter your password" required>
<br>
<a href="#">Forgot Password?</a>
</div>
</div>
<div class="form-group" id="staff-form" style="display: none;">
<label for="staff-sch_code">School Code:</label>
<input type="text" id="staff-sch_code" name="sch_code" placeholder="Enter your School Code" required>
<label for="staff-username">Username:</label>
<input type="text" id="staff-username" name="username" placeholder="Enter your username" required>
<br>
<label for="staff-password">Password:</label>
<input type="password" id="staff-password" name="password" placeholder="Enter your password" required>
<br>
<a href="#">Forgot Password?</a>
</div>
<div class="form-group" id="student-form" style="display: none;">
<label for="student-id">Student ID:</label>
<input type="text" id="student-id" name="student_id" placeholder="Enter your student ID" required>
<br>
<a href="#">Forgot Student ID?</a>
</div>
<div class="form-group" id="login-btn" style="display: none;">
<input type="submit" value="Login" class="login-btn">
</div>
</form>
</div>
{% endblock %}
project views.py: from django.shortcuts import render
from django.contrib import messages
def home(request):
return render(request, 'home.html')
app views.py: from django.shortcuts import render
# Create your views here.
def login(request):
return render(request, 'login/login.html')
from settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'login',
]
import os
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
this the structure of my project: │ └───__pycache__
├───openschool
│ └───__pycache__
├───static
│ ├───CSS
│ ├───IMAGES
│ └───js
└───templates
````Preformatted text``Preformatted text``Preformatted text``Preformatted text``Preformatted text`{% static 'js/index.html' %} should be {% static 'js/index.js' %}
Change the file extension.
Thank you your help. I have done the correction but still the problem is not solved.
Maybe, you should see the office document “how to static”
Thank you very much for the support. I have been able to resolve it with your help. I noticed the error apart from the wrong reference.