Django is serving up outdated html template files

Using Django
1

I have a base.html file in home/templates/home/ and this file contains the header and footer for my home page. The problem I’m having is that the header is not updated when I change it. Initially I copy/pasted from a static html file in another project:

<nav id='desktop' class='main-site'>
                <ul>
                    <li><img src="" alt="logo"></li>
                    <li><a href="index.html">Home</a></li>
                    <li>About</li>
                    <li>Portfolio <i class="fas fa-sort-down"></i>
                        <li>PH1</li>
                        <li>PH2</li>
                        <li>PH3</li>
                    </li>
                    <li><a href="">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><i class="fas fa-search"></i></li>
                </ul>
            </nav>

I updated it to replace the portfolio placeholders with an if/else statement wrapping a for loop and added a shop link, but none of this displays in the browser:

<nav id='desktop' class='main-site'>
                <ul>
                    <li><img src="" alt="logo"></li>
                    <li><a href="index.html">Home</a></li>
                    <li>About</li>
                    <li>Store</li>
                    <li>Portfolio <i class="fas fa-sort-down"></i>
                        {% if extended_projects_list %}
                            {% for project in extended_projects_list %}
                            <!--needs a dynamic link to the project-->
                            <li><a href="project_link">{{ project.name}}</a></li>
                            {% endfor %}
                        {% else %}
                            <li>No projects available</li>
                        {% endif %}
                    </li>
                    <li><a href="">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><i class="fas fa-search"></i></li>
                </ul>
            </nav>

I’m betting I’m missing something completely obvious but I’ve been searching for an answer to this and not finding anything close to it.

2

For clarity, are you saying you’re still seeing

in the rendered page?

Have you tried stoppping and restarting your application?

3

yes, and the new

  • Shop
    • isn’t showing. I did just try restarting everything and still no change.

    4

    One of the first things to check is to make sure you don’t have another file named “base.html” anywhere within your project with the old contents.
    There’s a very specific order in which directories are searched for files, and if you have two files by the same name, one is going to hide the other.

    5

    there’s only one other base.html file and it’s in blog/templates/blog/ and has very different content. I’ve also double and triple checked for a hidden cache and tried running it on a different os (I do my coding in a virtual box and I tried running it on the main os instead). I also tried pushing it to my VPS and running it on my domain and that didn’t work either. It makes seemingly no sense at all. I even tried searching the entire project, every file, for “PH1” and came up empty.

    6

    Then the next suggestion is to ensure that your browser is actually fetching a new page and not pulling from cache - try any combination of:

    • Shift-refresh or Ctrl-F5
    • Using a different browser
    • Making the request in “Incognito” or “privacy” mode.

    It’s also worth verifying that you’re seeing the request in the server’s console returning a 200 or that you see that request in the browser’s developer tools.

    7

    tried all three, also tried to copy the code into a new project and run that project, still getting the placeholders. where is the logic?! ~cries~

    8

    Can you post the view that is generating this page?

    9 
    from django.shortcuts import render
from django.views import generic
from django.http import HttpResponse
from django.template.response import TemplateResponse

from blog.models import Post
from portfolio.models import Projects

# Create your views here.
def index(request):
    latest_blogs_list = Post.objects.order_by('-created_on')[:3]
    latest_projects_list = Projects.objects.order_by('-completion_date')[:3]
    extended_projects_list = Projects.objects.order_by('-completion_date')[:10]
    return TemplateResponse(request, "home/index.html")
    10

    What does your index.html template look like?

    11 
    {% extends 'home/base.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <meta name="description" content="">

        <link rel="stylesheet" href="{% static 'home/styles.css' %}">

        <title></title>
    </head>
    <body>
        {% block header %}

        {% endblock header %}
        {% block content %}
        <main>
            <div id='recent'>
                <h2>Recent Work</h2>
                {% if latest_projects_list %}
                    {% for project in latest_projects_list %}
                    <img src="http://source.unsplash.com/100x150/" alt=""><!--placeholder src-->
                    {% endfor %}
                {% else %}
                    <p>No projects available</p>
                {% endif %}

            </div>
            <div id='call_to_action'>
                <h3>Ready to Shape the Future?</h3>
                <div class='button'></div>
            </div>
        </main>
        {% endblock content %}
        {% block footer %}

        {% endblock footer %}
    </body>
</html>
    12

    Ok, so the first thing I see is that you’re not passing any data into your template to be rendered.

    You’re creating variables in your view, but you’re not building a context from that data to be rendered.

    If this is where the test is being performed, what does your base.html look like?

    13

    this page in particular doesn’t have anything that needs to be rendered beyond a few variables that I’m calling with if/else/for statements.

    base.html:

    {% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <meta name="description" content="">

        <link rel="stylesheet" href="{% static 'home/styles.css' %}">

        <title>Coding Gems &mdash; Home</title>

        <script src="https://kit.fontawesome.com/bfd52c390d.js"
            crossorigin="anonymous"></script>
    </head>
    <body>
        {% block header %}
        <header>
            
            <nav id='mobile' class='main-site'>
                <ul>
                    <li><img src="https://source.unsplash.com/30x30/?logo" alt="logo"></li> <!--logo placeholder-->
                    <li><i class="fas fa-bars"></i></li>
                    <li><i class="fas fa-search"></i></li>
                </ul>
            </nav>
            <nav id='desktop' class='main-site'>
                <ul>
                    <li><img src="" alt="logo"></li>
                    <li><a href="index.html">Home</a></li>
                    <li>About</li>
                    <li>Store</li>
                    <li>Portfolio <i class="fas fa-sort-down"></i>
                        {% if extended_projects_list %}
                            {% for project in extended_projects_list %}
                            <!--needs a dynamic link to the project-->
                            <li><a href="project_link">{{ project.name}}</a></li>
                            {% endfor %}
                        {% else %}
                            <li>No projects available</li>
                        {% endif %}
                    </li>
                    <li><a href="">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><i class="fas fa-search"></i></li>
                </ul>
            </nav>

        </header>
        {% endblock header %}
        <nav id='mobile' class='main-site'>
            <ul>
                <li><img src="https://source.unsplash.com/30x30/?logo" alt="logo"></li> <!--logo placeholder-->
                <li><i class="fas fa-bars"></i></li>
                <li><i class="fas fa-search"></i></li>
            </ul>
        </nav>
        <nav id='desktop' class='main-site'>
            <ul>
                <li><img src="" alt="logo"></li>
                <li><a href="index.html">Home</a></li>
                <li>About</li>
                <li>Portfolio <i class="fas fa-sort-down"></i>
                    <li>PH1</li>
                    <li>PH2</li>
                    <li>PH3</li>
                </li>
                <li><a href="">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><i class="fas fa-search"></i></li>
            </ul>
        </nav>
        {% block content %}

        {% endblock content %}

        {% block footer %}
        <footer>
            <h4>Recent Projects</h4>
            {% if latest_projects_list %}
                {% for project in latest_projects_list %}
                <!--needs dynamic link to project -->
                <p><a href="project_link">{{ project.title }}</a></p>
                {% endfor %}
            {% else %}
                <p>No projects available</p>
            {% endif %}

            <h4>Recent Blogs</h4>
            {% if latest_blogs_list %}
                {% for post in latest_blogs_list %}
                <p><a href="">{{ post.title }}</a></p>
                {% endfor %}
            {% else %}
                <p>No blogs available</p>
            {% endif %}

            <h4>Follow Us</h4>
            <i class="fab fa-facebook"></i>
            <i class="fab fa-twitter-square"></i>
            <i class="fab fa-instagram-square"></i>
            <i class="fab fa-blogger"></i>

            <h4>Like what you see?</h4>
            <p>If you're ready to make the future, then click this button and let's get started.</p>
            <div class='button'></div>
        </footer>
        {% endblock footer %}
    </body>
</html>
    14

    Ok, but one point here is that you’re wondering why PH1 is still showing up.

    It’s showing up because it’s in your base template not within a block that will be overridden by the template that extends it.

    However, your if extended_projects_list is inside the block header, which is overridden by the empty block header in the index.html file.

    You’ve got some interactions between your index.html and base.html that are potentially confusing, but it does explain what you’re seeing.

    Also, you have an if extended_projects_list in your template, but if you don’t pass that value to the template in the context, that statement will never be “True”. A template only has access to the variables passed to it in the context.

    15

    confusing is definitely the right word here. I haven’t found anyone who can explain to me the interaction between a base template and an extended template. I understand that it somehow combines the two of them but I don’t understand the details of how they combine. Is base.html merged into index.html? or is it the other way around? Do I need the css on both, just base, or just index?

    I appreciate your help by the way, thank you. Now that I know where the issue is I know what to look for

    16

    Using your names, index.html extends base.html.

    That means that any block in index.html will replace a block by the same name in base.html

    As a more simplified example:

    base.html:

    {% block A %}
<div>Testing block A</div>
{% endblock A %}
<div>Data outside any block</div>
{% block B %}
<div>Testing block B</div>
{% endblock B %}

    index.html:

    {% extends "base.html" %}
{% block B %}
<div>Index block B</div>
{% endblock B %}

    is going to render:

    <div>Testing block A</div>
<div>Data outside any block</div>
<div>Index block B</div>

    But at the end, you’re rendering one page. Your css can go in whatever template you decide is appropriate - or both.

    17

    I did not know that. I’ll have to look again to see how to pass it in. But beyond that, it’s working perfectly now, and I better understand how it works

    18

    thank you so much for all your help, you’ve really pushed my knowledge of Django up a level today.

    1 Like