CSS не применяется к HTML-странице при получении нового рендера в Django - PullRequest
Новая
       35

CSS не применяется к HTML-странице при получении нового рендера в Django

0 голосов
/ 20 июня 2019

В настоящее время я борюсь с проблемой ответа HTML. У меня есть HTML-страница с CSS, JS работает нормально, пользователь выполнит взаимодействие, которое перейдет к JS -> отправить запрос ajax и выполнит некоторую обработку в рабочем представлении. И это представление возвращает мне визуализированное представление со всей обновленной информацией.

Проблема в том, что данный HTML содержит все, но выглядит как «сырой» HTML a.k.a к нему не применяется CSS, (скрипты работают нормально)

В заголовке моего HTML-файла: 

  <head>
<meta charset="utf-8">
<title>Sorting video: {{video.title}}</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'modelReco/cssFiles/swipeFrames.css' %}?v=00002'">
<script type="text/javascript" src='{% static "modelReco/jsScript/swipeFrames.js" %}?v=00003'></script>
  </head>

Представление, отображающее HTML: 

def sendSortVideoResponse(request,untreatedFrame,myVideo,frames,tracks,url):
    response = render(request, url, {
            'video':myVideo,
            'frames':frames,
            'tracks':tracks,
            'untreatedFrame': untreatedFrame[0],
            'countTreated': untreatedFrame[1],
            'totalFrames': len(frames),
            'progressBar': untreatedFrame[1]/len(frames)*100,
    })
   response["Cache-Control"] = "no-cache, no-store, must-revalidate" 
   response["Pragma"] = "no-cache" # HTTP 1.0.
   response["Expires"] = "0" # Proxies.
   return response

В settings.py: 

PROJECT_ROOT = os.path.join(os.path.dirname(__file__), '..')
SITE_ROOT = PROJECT_ROOT

MEDIA_ROOT = os.path.join(SITE_ROOT, 'media')
MEDIA_URL = '/media/'

STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'

Если вы F5 страницы, то все снова работает нормально. Для пользователя страница, на которой он находится, не перезагружается, поэтому это может быть проблемой, но у меня есть другая таблица стилей, которая отлично работает, поэтому я в замешательстве. Так что это может быть плохое использование статических файлов

РЕДАКТИРОВАТЬ Сеть и страницы:

До взаимодействия: enter image description here После взаимодействия: enter image description here

РЕДАКТИРОВАТЬ 2: визуализированный HTML 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sorting video: fashionShow2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">

    <link rel="stylesheet" type="text/css" href="/static/modelReco/cssFiles/swipeFrames.css?v=00002'">
    <script type="text/javascript" src='/static/modelReco/jsScript/swipeFrames.js?v=00003'></script>
  </head>
  <body>
    <h1>Video: fashionShow2</h1>

    <p>What can you do on this page?</p>
    <p>You've chosen to sort the video fashionShow2, this means you want to help the A.I to recognize the model by simply clicking on the models and validate your answer</p>

      <div id = 7951 class = "untreatedFrame" style="zoom:.6;-o-transform: scale(.6);-moz-transform: scale(.6)" >
        <img class = "frameImg" src="/media/fashionShow2/frames/7951.png"/>
          <a class = "frameImg" style="top: 0%; left: 65%; width: 35%; height: 100%;" onmouseover="displayValidation('rightCorner',true)" onmouseout="displayValidation('rightCorner',false)" onclick="validateFrameChoice(7951,1,true,'/modelReco/sortedTracks')">
            <div id="rightCorner" class = "validationCorner"></div>
          </a>
          <a class = "frameImg" style="top: 0%; left: 0%; width: 35%; height: 100%;" onmouseover="displayValidation('leftCorner',true),true" onmouseout="displayValidation('leftCorner',false)" onclick="validateFrameChoice(7951,-1,false,'/modelReco/sortedTracks')">
            <div id="leftCorner" class = "validationCorner"></div>
          </a>
      </div>

      <div class="w3-container">
        <div class="w3-light-grey w3-round-xlarge">
          <div class="w3-container w3-blue w3-round-xlarge" style="width:73.01587301587301%">46/63</div>
        </div>
      </div>
      <input type="button" value="Cancel previous choice" onclick="cancelPreviousChoice(7951)" />

    <form action="/modelReco/">
        <input type="submit" value="Return to home" />
    </form>
    <script>
    </script>


  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

Я нашел проблему по этой проблеме. Если вы пытаетесь использовать ajax и визуализировать новый HTML, просто заменив все на Jquery, как я ($("*").html(data);). Будьте осторожны при применении CSS к элементу тела, потому что браузеры (, как сказано в этом посте ) обычно не заботятся об этих тегах и удаляют их.

Вот почему в моих восстановленных данных ajax у меня было тело и все, но при визуализации браузером тег body просто исчезал.

Если вам нужно применить теги CSS к телу, просто добавьте тег div, как этот, и примените к нему свой CSS: 

<body>
  <div id="body">
    .... 
  </div>
</body>

Единственное, что странно, это то, что когда вы F5 возвращаете страницу с Django, тег body возвращается, поэтому первый взгляд был в порядке, но при визуализации без обновления тег body не показывался.

0 голосов
/ 20 июня 2019

settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

urls.py (проект не приложение) 

from django.conf import settings
from django.conf.urls.static import static
...

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
...