Search code examples
djangodjango-templatesdjango-staticfiles

CSS not applying to HTML page when receiving a new render in Django

I am currently struggling on a problem of HTML response. I have an HTML page with CSS,JS working fine, the user will do an interaction that will go to JS -> send ajax request and do some treatment within a working view. And this view give me back a rendered view with all the info updated.

The problem is that the HTML given is containing everything but looks like "raw" HTML a.k.a no CSS applied to it, (scripts are working fine)

In the head of my HTML file :

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

The view that render the 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

In 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/'

If you F5 the page then everything works fine again. For the user, the page he is on doesn't reload so it might be the problem but I have an other stylesheet doing a progressing bar working perfectly so I'm confused. So it might be a bad use of static files

EDIT Network and page :

Before the interaction :enter image description here After the interaction :enter image description here

EDIT 2 : The rendered 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>
Solution

  • I found the issue on this problem. If you are trying to use ajax and render a new HTML by simply replacing everything with Jquery like I did ($("*").html(data);). Be careful about applying CSS on your body element because browsers (as it is said on this post) usually don't care about those tags and remove it.

    That's why in my retrieved ajax data, I had the body and everything but when rendered by the browser, the body tag was just disappearing.

    If you need to apply CSS tags to body, just add a div tag like this and apply your css on it :

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

    The only weird thing is that when you F5 the page with Django the body tag come back, so the first look was ok but when rendered without refresh no body tag was showing.