When i am clicking button , js file is not loading internally..the static tag is not working inside home.html ...
Its been a very long time since I had to use Django templates but I am having some trouble loading static js files.
nav.html
<!doctype html>
<html lang="en">
<head>
{% load static %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src='/crudapp/static/home.js'></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Parcel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-7mQhpDl5nRA5nY9lr8F1st2NbIly/8WqhjTp 0oFxEA/QUuvlbF6M1KXezGBh3Nb" crossorigin="anonymous">
<style>
body{
background-color: rgb(54, 60, 58);
}
#dd{
color:blanchedalmond;
}
.table{
background-color: white;
width:500px;
margin-left: 500px;
}
.card{
margin-top: 100px;
margin-left:500px;
width:500px;
}
.card-body{
margin-left:100px;
}
.navbar-brand{
color:rgb(79, 200, 237);
}
</style>
<link>
<script src="/crudapp/static/home.js"></script>
</head>
<body>
<nav >
<div >
<a href="{%url 'index' %}">CRUD</a>
<div id="navbarSupportedContent">
<ul >
<li >
<a href="{%url 'data' %}">DATA</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
home.html
{% load static %}
<!doctype html>
<script type="text/javascript" src="{% static 'js/home.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<body>
{%include 'nav.html'%}
<div >
<div >
<form action="" method="POST">
{% csrf_token %}
{{form.as_p}}
<button type="submit" id="btnn" >SUBMIT</button>
</form>
</div>
</div>
</body>
</html>
settings file
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
directory
-static
-css
-js
-home.js
home.js
$(document).ready(function(){
$('#btnn').on('click',function(){
id=$('#id_Emp_ser').val()
console.log(id)
const dict_val={id}
const s=JSON.stringify(dict_val)
$ajax({
url:"/crudapp/views/data",
type:"POST",
contentType:"application/json",
data:s,
});
});
});
Please help anyone from this..
CodePudding user response：
I think you should use
STATICFILES_DIRS
Rather than STATIC_ROOT
CodePudding user response：
-------- handle Static Files In django --------
# Steps:
# 1 - Create (static) folder in Root Directory of Project
# 2 - Paste Your Static Files Folder in (static) Folder (js,css,images...etc)
# 3 - Now Do Setting in (setting.py)
STATIC_URL = '/static/'
import os
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
# ---------- OR ------------------------
# ---------- if Django version above 3.2 then ----------
STATICFILES_DIRS = [BASE_DIR /'static']
# 4 - add {% load static %} tag on top of html page
# 5 - Now use ({% static 'assets/image.jpg' %}) tag in HTML File for calling static files
# 6 - Done