Django static JS File not loading

Question

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/bootstrap@5.2.2/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 class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="{%url 'index' %}">CRUD</a>
          
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="navbar-brand" 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 class="card">
        <div class="card-body">
           <form action="" method="POST">
            
                
                {% csrf_token %}
                {{form.as_p}}
                <button type="submit" id="btnn" class="btn btn-primary">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..

When you fix all of it please debug your solution and ensure what exactly is broken. "When I click button" - this description does not really point directly onto django static files. To check if static files are configured correctly grab static file url from rendered page and open it manually in a separate tab. If file contents are shown then static files are fine but js itself or markup are broken. And check browser console for error messages when testing. — Ivan Starostin, Oct 16 '22 at 21:17

score 0 · Answer 1 · answered Oct 16 '22 at 20:44

0

I think you should use

STATICFILES_DIRS

Rather than STATIC_ROOT

answered Oct 16 '22 at 20:44

Hashem

595
1
3
8

score 0 · Answer 2 · answered Oct 17 '22 at 07:44

-------- 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

Django static JS File not loading

2 Answers2

-------- handle Static Files In django --------