i have following templates structure in flask:
templates/
/posts
list.html
base.html
index.html
my base.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITV</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
{%- block topbar -%}
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">САПР</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li class="active">Головна</li>
<li>Новини</li>
<li>Розклад занять</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
{%- endblock -%}
<div class="container">
<div class="content">
{% block page_header %}{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
i can render template, for example : render_template('posts/list.html'), which extends my base.html
my list.html:
{% extends "base.html" %}
{% block content %}
Posts
{% endblock %}
How can i set active element menu in base.html
<li class="active">Головна</li>
<li>Новини</li>
<li>Розклад занять</li>
when i'm rendering list.html, and cant pass data directly into base.html?
In Flask, the request variable is available by default in templates, so you can simply check request.path in your base.html and adjust your links.
<li {% if request.path == '/' %}class="active"{% endif %}>
Головна
</li>
Can use a ternary also...just a bit shorter & nicer
<li {{ 'class="active"' if request.path == '/' else '' }}>
Головна
</li>
Related
i downloaded code from github and ran its server it showed me output with styled templates like this:
But after two days, my styling gone wrong, similarly in my own project where I was working styling was working but now, it gives me view like this:
and forms displaying like this:
I don't know why it gone like this as two days before it was working fine, and also github project that i have downloaded, its styling also not working, even i didn't make any change in that downloaded project. First it was working. Now in both downloaded and my own express travel project as I was following that downloaded project templates these templates are not working fine.
Is there any error of static files? or CSS styling? how can i resolve this?
here are my template code:
add_manager_template.html
{% extends 'admin_template/base_template.html' %}
{% block page_title %}
Add Manager
{% endblock page_title %}
{% block main_content %}
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Add Manager</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
{% url 'add_manager_save' as action_path %}
{% include 'admin_template/form_template.html' with messages=messages form=form action_path=action_path button_text="Add Manager" %}
</div>
<!-- /.card -->
</div>
</div>
</div>
</section>
<!-- /.content -->
{% endblock main_content %}
form_template.html
<form role="form" action="{{ action_path }}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="card-body">
{% for field in form %}
<div class="form-group">
{{ field.errors }}
{{ field.label_tag }}
{{ field }}
</div>
{% endfor %}
<div class="form-group">
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger" style="margin-top:10px">{{ message }}</div>
{% endif %}
{% if message.tags == 'success' %}
<div class="alert alert-success" style="margin-top:10px">{{ message }}</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary btn-block">{{ button_text }}</button>
</div>
</form>
home_content.html
{% extends 'admin_template/base_template.html' %}
{% block page_title %}
Home
{% endblock page_title %}
{% block main_content %}
<!-- Main content -->
<section class="content">
<div class="container-fluid">
</div>
</section>
<!-- /.content -->
{% endblock main_content %}
sidebar_template.html
{% load static %}
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="#" class="brand-link">
<img src="{% static 'dist/img/logo.jpg' %}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">Express Travels</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{% static 'dist/img/admin.png' %}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
{{ user.username }}
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
{% url 'add_manager' as add_manager %}
<a href="{% url 'admin_home' %}" class="nav-link {% if request.path == add_manager %} active {% endif %}">
<i class="nav-icon fas fa-th"></i>
<p>
Home
</p>
</a>
</li>
<li class="nav-item">
{% url 'add_manager' as add_manager %}
<a href="{{ add_manager }}" class="nav-link {% if request.path == add_manager %} active {% endif %}">
<i class="nav-icon fas fa-th"></i>
<p>
Add Manager
</p>
</a>
</li>
<li class="nav-item">
{% url 'edit_manager' as edit_manager %}
<a href="#" class="nav-link {% if request.path == edit_manager %} active {% endif %}">
<i class="nav-icon fas fa-th"></i>
<p>
Edit Manager
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
base_template.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Express Travels</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
<!-- iCheck -->
<link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
<!-- JQVMap -->
<link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<!-- summernote -->
<link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
{% block custom_css %}{% endblock custom_css %}
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
</ul>
<h4 style="margin-left: 10px;margin-top: 5px;">Express Travels | Admin Panel</h4>
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item">
<a class="nav-link" href="logout_user">
Logout
</a>
</li>
</ul>
<!-- Right navbar links -->
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
{% include 'admin_template/sidebar_template.html' with user=user id=id %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">
{% block page_title %}
{% endblock page_title %}
</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
{% block main_content %}{% endblock main_content %}
</div>
<!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- ChartJS -->
<script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>
<!-- Sparkline -->
<script src="{% static 'plugins/sparklines/sparkline.js' %}"></script>
<!-- JQVMap -->
<script src="{% static 'plugins/jqvmap/jquery.vmap.min.js' %}"></script>
<script src="{% static 'plugins/jqvmap/maps/jquery.vmap.usa.js' %}"></script>
<!-- jQuery Knob Chart -->
<script src="{% static 'plugins/jquery-knob/jquery.knob.min.js' %}"></script>
<!-- daterangepicker -->
<script src="{% static 'plugins/moment/moment.min.js' %}"></script>
<script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="{% static 'plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js' %}"></script>
<!-- Summernote -->
<script src="{% static 'plugins/summernote/summernote-bs4.min.js' %}"></script>
<!-- overlayScrollbars -->
<script src="{% static 'plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.js' %}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<<!-- script src="{% static 'dist/js/pages/dashboard.js' %}"></script> -->
<!-- AdminLTE for demo purposes -->
<!-- <script src="{% static 'dist/js/demo.js' %}"></script> -->
{% block custom_js %}
{% endblock custom_js %}
</body>
</html>
Actually, i just putted this project to new virtual environment and executed,now it worked for me.
It's giving me an error: NoReverseMatch at / targeting the base.html file (shown in the pic).But the base.html file looks fine to me.
Base.html
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blog</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Medium Style editor -->
<script src="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One&display=swap" rel="stylesheet">
</head>
<body class="loader">
<!-- Navbar -->
<nav class="navbar custom-navbar techfont navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Blog</a></li>
<li>About</li>
<li>GitHub</li>
<li>LinkedIn</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li> <a href="{% url 'post_new' %}" >New Post</a></li>
<li> <a href="{% url 'post_draft_list' %}" >Drafts</a></li>
<li> <a href="{% url 'logout' %}" >Logout</a></li>
<li> Welcome: {{user.username}} </li>
{% else %}
<li> <span class="glyphicon glyphicon-user"></span> </li>
{% endif %}
</ul>
</div>
</nav>
<!-- COntent Block -->
<div class="content container">
<div class="row">
<div class="col-md-8">
<div class="blog-posts">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
</html>
Post_detail.html
{% extends 'blog/base.html' %}
{% block content %}
<h1 class="posttitle loader">{{post.title}}</h1>
{% if post.published_date %}
<div class="date postdate">
{{post.published_date}}
</div>
{% else %}
Publish
{% endif %}
<p class="postcontent">{{post.text|safe|linebreaksbr}}</p>
{% if user.is_authenticated %}
<a href="{% url 'post_edit' pk=post.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{% url 'post_remove' pk=post.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-remove"></span>
</a>
{% endif %}
<hr>
Add Comment
<div class="container">
{% for comment in post.comments.all %}
<br>
{% if user.is_authenticated or comment.approved_comment %}
{{ comment.create_date }}
{% if not comment.approved_comment %}
<a href="{% url 'comment_approve' pk=comment.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-ok"></span>
</a>
<a href="{% url 'comment_remove' pk=comment.pk %}" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</a>
{% endif %}
<p>{{comment.text|safe|linebreaks}}</p>
<p>Posted by: {{comment.author}}</p>
{% endif %}
{% empty %}
<p>No comments!</p>
{% endfor %}
</div>
{% endblock %}
Post_list.html (The very first page that's supposed to be open on running the server)
{% extends 'blog/base.html' %}
{% block content %}
<div class="centerstage">
{% for post in post_list %}
<div class="post">
<h1>{{post.title}}</h1>
<div class="date">
<p>Published on: {{post.published_date|date:'D M Y'}}</p>
</div>
Comments: {{ post.approve_comments.count }}
</div>
{% endfor %}
</div>
{% endblock %}
urls.py
Blog.urls
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$',views.PostListView.as_view(),name='post_list'),
url(r'^about/$',views.AboutView.as_view(),name='about'),
url(r'^post/(?P<pk>\d+)/$',views.PostDetailView.as_view(),name='post_detail'),
url(r'^post/new/$',views.CreatePostView.as_view(),name='post_new'),
url(r'^post/(?P<pk>\d+)/edit/$',views.PostUpdateView.as_view(),name='post_edit'),
url(r'^post/(?P<pk>\d+)/remove/$',views.PostDeleteView.as_view(),name='post_remove'),
url(r'^drafts/$',views.DraftListView.as_view(),name='post_draft_list'),
url(r'^post/(?P<pk>\d+)/comment/$',views.add_comment_to_post,name='add_comment_to_post'),
url(r'^comment/(?P<pk>\d+)/approve/$',views.comment_approve,name='comment_approve'),
url(r'^comment/(?P<pk>\d+)/remove/$',views.comment_remove,name='comment_remove'),
url(r'^post/(?P<pk>\d+)/publish/$',views.post_publish,name='post_publish'),
]
Didn't receive this error before. Came all of a sudden. Clueless as to what went wrong. How to tackle this?
the problem is in post_list.html or post_detail.html .
basically you are having the url that is not matches with any urls in urls.py
ie({% url 'post_detail' pk=post.pk %})
so check your post_list.html and post_detail.html your base.html is well and good
The same error i was facing i looked to my firstly rendered page and the extra url was there.
As it says in the error message, the blog url with arguments {'pk: ''} is not found. This basically means that on the page where you're doing "{% url 'post_detail' pk=post.pk %}", post is probably None or not an object you're expecting. You need to check that your {% for post in post_list %} actually returns posts.
I thought that by just including jQuery from CDN in base.html, it will be defined in all html pages that extend the base, like when including from static files, without repeating
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
base.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">
<title>notifyMe</title>
<!-- Bootstrap -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<h1>NotifyMe</h1>
{% block main %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Edit
event_add.html:
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block main %}
<div class="container">
<div id="form" class="col-md-6 col-md-offset-3 jumbotron">
<div class="text-center">
<h3>New Task</h3>
</div>
<form method="POST">
{% csrf_token %}
{% for field in form.visible_fields %}
<div class="form-group row">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{field|add_class:'form-control'}}
{% for error in field.errors %}
<span class="help-block"> {{ error}} </span>
{% endfor %}
</div>
{% endfor %}
<div class="form-group">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-ok"></span> Save
</button>
Cancel
</div>
</form>
</div>
</div>
<script>
$(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "2016:2020",
});
});
</script>
{% endblock %}
My function wasn't recognize until I added the CDN line before the function script.
Does {% extends 'base.html' %} have some limits?
The .datepicker() plugin you try to use is included in Jquery-UI. I suggest you to restructure your templates as follows (irrelevant parts removed for clarity):
base.html
<html lang="en">
...
...
{% block main %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Consider also adding Bootstrap.js here! -->
{% block extra_js %}{% endblock extra_js %}
</body>
</html>
and use main block for HTML content and extra_js block for Javascript. This way you will guarantee that any user scripts will come after JQuery. For example:
event_add.html
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block main %}
<div class="container">
...
...
</div>
{% endblock main %}
{% block extra_js %}
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></script>
<script>
$(function() {
...
...
</script>
{% endblock extra_js %}
I have a base template that includes another template for a drop down menu. If I hard code items for the li tag, it works fine. If I try to pass the objects.all(), it doesn't fill. Here's my setup:
Model
class Category(models.Model):
name = models.CharField(max_length=40, blank=True)
def __unicode__(self): # Python 3: def __str__(self):
return self.name
View
def dropdown_cats(request):
cats = Category.objects.all()
return render(request, 'home/dropdown-cats.html', {'cats': cats})
home/base.html
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{% static 'media/logo.png' %}">
<title>something.com</title>
<!-- Bootstrap core CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}" type="text/css" media="screen" />
<link href="{% static 'dist/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<!-- Custom CSS -->
<link href="{% static 'dist/css/custom.css' %}" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="site_wrapper" class="clearfix">
<!-- Above-Nav
================================================== -->
<div class="above-nav visible-desktop">
<div class="container" style="text-align:center;">
</div>
</div>
<!--END above-nav
================================================== -->
<!-- Navbar ==================================== -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href={{home}}>something.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% block navbar %}
{% endblock navbar %}
</ul>
</div>
</div><!--/.nav-collapse -->
</div><!-- navbar-inner -->
</div>
<!-- End Navbar =================================== -->
<!-- Start Grid layout ============================ -->
<!--<div class="container-fluid">-->
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-xs-3"><h2>My Most Recent Blogs</h2>
{% block left_side %}
{% endblock left_side %}
</div>
<div class="col-xs-6">
{% block middle %}
{% endblock middle %}
</div>
<div class="col-xs-3"><h2>Links</h2>
{% block right_side %}
{% endblock right_side %}
</div>
</div>
</div>
<!-- End Grid Layout ====================== -->
</div>
<!-- close the wrapper ====================== -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{% static 'dist/js/bootstrap.min.js' %}"></script>
</body>
</html>
home/home.html
{% extends "home/base.html" %}
{% block navbar %}
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Categories<span class="caret"></span>
{% include 'home/dropdown-cats.html' %}
</li>
<li>Previous Blogs</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endblock navbar %}
{% block left_side %}
{% endblock left_side %}
{% block middle %}
{% endblock middle %}
{% block right_side %}
{% endblock right_side %}
home/dropdown-cats.html
<ul class="dropdown-menu">
{% if cats %}
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% endfor %}
{% else %}
<li>BAD TEST</li>
{% endif %}
</ul>
If I test this by replacing the url tag in the for loop with something similar like GOOD TEST, there's still nothing inserted because cats is empty. All I get is one drop down entry "BAD TEST". I've used the shell to ensure Category.objects.all() returns the list as of categories as it should.
No idea how that Post statement got in the view there. Must have accidentally pasted it it. Anyways, I've excluded it from the view and included all my html for more details. I THINK I understand what you're saying Daniel, but I'm a bit confused. Isn't this how the tutorial modifies templates, by including it in the render parameters: render(request, 'template.html', dicts)
You don't really show enough information here, but I suspect you're getting confused about templates and views. Simply including another template doesn't "call" another view: the only thing that calls views is the URL handler. Templates themselves don't know anything about views.
If you want to dynamically add context for another template, you need to make it into a custom inclusion tag.
Replace the snippet in your Template with:
<ul class="dropdown-menu">
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% empty %}
<li>BAD TEST</li>
{% endfor %}
</ul>
The above will definitely work as long as the cats queryset as set in your View code has 1 or more items. The for .. empty template tag used in the template code above is documented here.
I am developing an application using Symfony2. I am using Twig for templating an a 3 level interface architecture. In my application there are 3 kind of users, anonimous users, udentified users and Administrators. The Page is divided in sections this way:
<!-- app/Resources/views/base.html.twig -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{% block title %}Anotatzailea{% endblock %} - Anotatzailea</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{% block stylesheets %}
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<section id="wrapper">
<header id="header">
<div id="logo">
<text>Anotatzailea</text>
</div>
<div class="top">
{% block navigation %}
{# Ikusi behar da ea erabiltzailea kautotu den, horren arabera aukera desberdinak erakusteko #}
{% if is_granted('ROLE_USER') %}
<nav>
<ul class="navigation">
<li class="first current_page_item">Hasiera</li>
<li>Argibideak</li>
<li>Kontua</li>
<li>Estatistikak</li>
<li>Anotatu</li>
<li>FAQ</li>
<li>Kontaktatu</li>
<li class="last">Irten</li>
</ul>
</nav>
{% elseif is_granted('ROLE_ADMIN')%}
<nav>
<ul class="navigation">
<li class="first current_page_item">Hasiera</li>
<li>Argibideak</li>
<li>Kontua</li>
<li>Dokumentuak</li>
<li>Erabiltzaileak</li>
<li>Estatistikak</li>
<li class="last">Irten</li>
</ul>
</nav>
{% else %}
<nav>
<ul class="navigation">
<li class="first current_page_item">Hasiera</li>
<li>Argibideak</li>
<li>Sartu</li>
<li>Erregistratu</li>
<li>FAQ</li>
<li class="last">Kontaktatu</li>
</ul>
</nav>
{% endif %}
{% endblock %}
</div>
</header>
<section id="page">
<section class="main-col">
{% block body %}{% endblock %}
</section>
{% if is_granted('ROLE_USER') or is_granted('ROLE_ADMIN') %}
<section class="sidebar">
{% block sidebar %}{% endblock %}
</section>
{% endif %}
<div id="footer">
{% block footer %}
<!-- Partekatu -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f4e593d146466e9"></script>
<!--------------->
<script type="text/javascript">
var addthis_config = {
ui_language : "[eu]"
}
</script>
Testua anotatzeko tresna - created by H.Salaberri</a>
{% endblock %}
</div>
</section>
</section>
{% block javascripts %}
{% endblock %}
</body>
</html>
What I would like to do is to show the sidebar just when the identified users are logged in the application. The way I do it I just achieve not show the sidebar for anonymous users. The other problem is I don't know how to make the main-col section bigger so that the gap left by the sidebar can not be seen.
I think you can get what you need to,easily by applying the condictions as
{% if is_granted('ROLE_USER') or is_granted('ROLE_ADMIN') %}
<section class="main-col">
{%else%}
<section class="main-col">
{# modify the class of this section as your requirement #}
{%endif%}
{% block body %}{% endblock %}
</section>
{% if is_granted('ROLE_USER') or is_granted('ROLE_ADMIN') %}
<section class="sidebar">
{% block sidebar %}{% endblock %}
</section>
{%endif%}
hope this helps