个人中心
gpt4 book ai didi

css - 我的更新页面的 css 没有正确加载，但其他页面工作得很好

转载 作者：行者123 更新时间：2023-12-04 12:27:57 25 4
gpt4 key购买 nike

当我尝试使用主键或 ID 呈现模板传递参数时CSS 未按预期加载，但是当我尝试仅使用请求而不传递 id arg 来呈现它时它加载完美。
View 文件

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)
这是当我尝试通过我的 View 传递 id 时查看前端的方式，它没有加载预期的 css
enter image description here
它显示错误
enter image description here
但是如果我们只是删除 pk 的使用，那么 css 将被加载
它应该看起来像
enter image description here
这是我的模板代码 
{% 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="abc@email.com" 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 %}
这是我的 base.html 文件 
<!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>

最佳答案

您正在加载静态文件:

<script src="../static/elegant/vendor/jquery/jquery.min.js"></script>
如果 URL 看起来像 leads/52 ，那么它将从 leads/static/elegant/vendor/jquery/jquery.min.js 加载这不是我们正在寻找的。这源于 ..向上移动一级，所以如果我们使用 foo/bar/ ，然后从 .. 开始将导致 foo/static/elegant/… .但是如果路径是 foo/bar/qux ，因此它将旨在使用 foo/bar/static/elegant/… 加载数据作为路径。
您可以使用绝对路径，从而将其实现为: 
<script src=/static/elegant/vendor/jquery/jquery.min.js"></script>
甚至更好，利用 {% static … %} [Django-doc]模板标签: 
<script src={% static 'elegant/vendor/jquery/jquery.min.js' %}"></script>
然后它会在参数前面加上 STATIC_URL setting [Django-doc] 的值，这使得以后更改静态 URL 变得容易。
您将需要使用 ../static/ 更新所有元素。字首。

关于css - 我的更新页面的 css 没有正确加载，但其他页面工作得很好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69197494/

25 4 0
文章推荐： git - 有没有办法在 git 恢复之前取回已提交的更改？
文章推荐： 重新编码和折叠多个二进制编码的列
文章推荐： php - 为什么在 PHP 中的函数 header() 之后调用的函数 http_response_code() 表现得很奇怪？
文章推荐： r - ggplot2 在箱线图顶部添加文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com