Question 36281 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Django static JS File not loading – Jquery

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

Tags:

2

Answers


  1. 0

    I think you should use

    STATICFILES_DIRS

    Rather than STATIC_ROOT

    Login or Signup to reply.
  2. 0

    ——– 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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search