my css of update page not loading correctly but other page are working very fine-CodePudding

When I try to render template passing argument with primary key or ID CSS not loading as expected but when I try to render it simply with a request without passing id arg it loads perfectly.

viewsy.py

def update_lead(request,pk):
    leads = Lead.objects.get(id = pk)
    followup = Followup.objects.all
    agent = Agent.objects.all
    source = Source.objects.all
    print(f"the leads are {leads}")
    context = {"lead":leads,"followup":followup,"agent":agent,"source":source}
    
    return render(request,"home/update_lead.html",context)

This is how looks at the frontend when I try passing id with my view it is not loading the css which is expepcted

it is showing error

but if we just remove the use of pk then the css will be loading

and it is supposed to look like

here is my templates code

{% extends 'base.html' %}

{% block body %}
<div class="container">
  <h2>Create Lead</h2>
  <form action="creat_handle_lead" method="POST">
    {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">Name</label>
        <input type="text" class="form-control" id="inputEmail4" required name="name" value="{{lead.name}}">
      </div>
      <div class="form-group col-md-6">
        <label for="inputPassword4">Subject</label>
        <input type="text" class="form-control" id="inputPassword4" name="subject" required value="{{lead.subject}}">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputAddress">Email</label>
        <input type="email" class="form-control" id="inputAddress" name="email" placeholder="[email protected]" value="{{lead.email}}">
      </div>
      <div class="form-group col-md-6">
        <label for="inputAddress2">Contact Number</label>
        <input type="number" class="form-control" id="inputAddress2" name="number"value = "{{lead.number}}" placeholder="99XX80XXXX">
      </div>
    </div>
    
    
    <div class="form-row">
      
      <div class="form-group col-md-4">
        <label for="inputState">Source</label>
        <select id="inputState" class="form-control" name="source">
          {% for x in source %}
          <option value="{{x.name}}">{{x.name}}</option>
          <!-- <option selected></option> -->
          {% endfor %}
          
        </select>
      </div>
      <div class="form-group col-md-4">
        <label for="inputState">Assign To</label>
        <select id="inputState" class="form-control" name="assign">
          {% for x in agent %}
          <option value="{{x.name}}">{{x.name}}</option>
          <!-- <option selected></option> -->
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Initial Followup</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="followup"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Update Lead </button>
  </form>
</div>

{% endblock body %}

Here is my base.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/elegant/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="../static/elegant/css/custom.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="../static/elegant/css/sb-admin-2.min.css" rel="stylesheet">
    <title>{% block title %}   {% endblock title %}</title>
    {% block exhead %}

    {% endblock exhead %}
</head>
<body>
    
    
    {% block body %}
    

    {% endblock body %}


        <!-- Bootstrap core JavaScript-->
        <script src="../static/elegant/vendor/jquery/jquery.min.js"></script>
        <script src="../static/elegant/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    
        <!-- Core plugin JavaScript-->
        <script src="../static/elegant/vendor/jquery-easing/jquery.easing.min.js"></script>
    
        <!-- Custom scripts for all pages-->
        <script src="../static/elegant/js/sb-admin-2.min.js"></script>
    
        <!-- Page level plugins -->
        <script src="../static/elegant/vendor/chart.js/Chart.min.js"></script>
    
        <!-- Page level custom scripts -->
        <script src="../static/elegant/js/demo/chart-area-demo.js"></script>
        <script src="../static/elegant/js/demo/chart-pie-demo.js"></script>
</body>
</html>

CodePudding user response：

You are loading the static files with:

<script src="../static/elegant/vendor/jquery/jquery.min.js"></script>

If the URL looks like leads/52, then it will load from leads/static/elegant/vendor/jquery/jquery.min.js which is not what we are looking for. This originates from the fact that .. moves one level up, so if we work with foo/bar/, then starting with .. will result in foo/static/elegant/…. But if the path is foo/bar/qux, it will thus aim to load data with foo/bar/static/elegant/… as path.

You can work with an absolute path, and thus implement this as:

<script src=/static/elegant/vendor/jquery/jquery.min.js"></script>

or even better, make use of the {% static … %} [Django-doc] template tag:

<script src={% static 'elegant/vendor/jquery/jquery.min.js' %}"></script>

It will then prepend the parameter with the value of the STATIC_URL setting [Django-doc], which makes it easy to later change the static URL.

You will need to update all the items with a ../static/ prefix.