CODEWITHSUNDEEP
python-3.xtemplatestwitter-bootstrap-3flaskjinja2
StormElf
StormElf

Reputation: 53

Jinja2 Child content not showing up

Thanks for the help! So, I'm trying to create a simple layout with a Bootstrap nav-bar and a block of content on the body, and that works fine. But, when I extend that to a child, no matter what changes I make on the child, nothing shows up! I'll post the two templates I'm using right now.

layout.html

    <!doctype html>
{% extends "bootstrap/base.html" %}
<html>
    <head>
        <title>{% block title %}{% endblock %} </title>
    </head>
<body>
{% block navbar %}
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
{% endblock %}
<div class="container-fluid" id="form">
    {% block container %}{% endblock %}
</div>
</body>
</html>

And the child:

{% extends "layout.html" %}
<html>
<head></head>
<body>
<h3>aaa</h3>
{% block container %}
<div class="collapse navbar-collapse" id="container">
    {{ super() }}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
</div>
</div>
{% endblock %}
</body>

The nav-bar shows, but the form doesn't show up, at all. It's as if the child does not exist. Any ideas? Thank you

P.S: So, I changed to this: layout.html

<!doctype html>
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body>
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid" id="container">
    {% block container %}{% endblock %}
</div>
</body>
</html>

And this child:

{% extends "layout.html" %}
{% block container %}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
{% endblock %}

This way, there's no duplicate {% extend ... %}. It now shows the form, but the WHOLE div is clickable, rendering it pretty much useless.. Any ideas?

Upvotes: 0

Views: 1207

Answers (1)

GAEfan
GAEfan

Reputation: 11360

You aren't supposed to have all the <html><head><body> tags in a child. It should just be:

{% extends "layout.html" %}

{% block container %}
<h3>aaa</h3>
<div class="collapse navbar-collapse" id="container">
    {{ super() }}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
</div>
</div>
{% endblock %}

And notice how I moved the <h3>aaa</h3> code to inside the block.

Next, you can only have one {% extends ... %} call per rendering (You can't extend an extension). So, you need to consolidate your child to layout.html, making separate layouts per view.

Alternatively, you could change layout.html to use an include, keeping just one {% extends... %} per view:

layout.html

{% include "bootstrap/base.html" %}

{% block navbar %}
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
{% endblock %}
<div class="container-fluid" id="form">
    {% block container %}{% endblock %}
</div>

Again, notice there are no duplicated <html> etc tags in layout.html. Those are already in bootstrap/base.html

Upvotes: 1

Related Questions