I used Django to create a blog and i want to display a single post on page when i click on a post title and no matter of the used method i cannot display anything on the page.
My Views:
class One_Per_Page(DetailView):
model = AboutMe
objects = AboutMe(id)
def oneperpage(request):
entry = One_Per_Page.objects.get_queryset(pk=AboutMe.id)
#entries = super(One_Per_Page).get_queryset()
return render_to_response('blog/aboutme_detail.html', {'AboutMe': entry})
this is the URL i use:
url(r'^(?P<pk>\d+)$', One_Per_Page.as_view(), name='oneperpage
this is the html page that must display a single post when the title of it is cliked:
<!DOCTYPE html>
<html lang="en">
<head>
<title>EBA</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="/static/css/styles.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="mainHead">
<img src="/static/img/mainlogo.png" %} width="700" height="144" %}>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='{{ STATIC_URL }}/latestnews/'>News</a></li>
<li><a href='{{ STATIC_URL }}/archive/'>Archive</a></li>
</ul>
</nav>
</header>
{% block content %}
<div>
<article>
<h4>{{ entry.titleMe }}</h4>
<p class="postInfo">
on {{ entry.dateMe }}
</p>
<div class="typicalArticle">
{{ entry.contentMe|safe|linebreaks }}
</div>
</article>
</div>
{% endblock %}
<footer class="mainFooter">
<p> copyright © 2015</p>
</footer>
</body>
</html>
Can anyone help me to do this right?
I dont know what error you are getting but try this, actually you dont need to do much:
url(r'^stuff/(?P<pk>\d+)/', One_Per_Page.as_view(
template_name='detail.html'), name="detail")
and
class One_Per_Page(DetailView):
model = AboutMe
and in template, you have automatically object instance you can access like this:
{{ object.name }}
{{ object.biography }}
Related
I m working on learning Django with MDN project on Local Library.
My two pages are rendering whereas the book detail page is not rendering and giving error page not found. Please advice what if I have missed anything:
So far entire project is on MDN documents.
catalog/urls.py
from django.urls import path
from catalog import views
app_name = 'catalog'
urlpatterns = [
path('', views.index, name='index'),
path('books/', views.BookListView.as_view(), name='books'),
path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
]
catalog/templates/catalog/book_detail.html
{% extends 'catalog/base.html' %}
{% block content %}
<h1>Title: {{ book.title }}</h1>
<p><strong>Author:</strong> {{ book.author }}</p>
<p><strong>Summary:</strong> {{ book.summary }}</p>
<p><strong>ISBN:</strong> {{ book.isbn }}</p>
<p><strong>Language:</strong> {{ book.language }}</p>
<p><strong>Genre:</strong> {{ book.genre.all|join:", " }}</p>
<div style="margin-left:20px;margin-top:20px">
<h4>Copies</h4>
{% for copy in book.bookinstance_set.all %}
<hr>
<p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'd' %}text-danger{% else %}text-warning{% endif %}">{{ copy.get_status_display }}</p>
{% if copy.status != 'a' %}<p><strong>Due to be returned:</strong> {{copy.due_back}}</p>{% endif %}
<p><strong>Imprint:</strong> {{copy.imprint}}</p>
<p class="text-muted"><strong>Id:</strong> {{copy.id}}</p>
{% endfor %}
</div>
{% endblock %}
catalog/templates/catalog/base.html
{% load static %}
<!DOCTYPE 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.0" />
<link rel="stylesheet" href="{% static 'catalog/style.css' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"/>
{% block title %}
<title></title>
{% endblock %}
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<ul class="sidebar-nav list-inline1 p-2">
<li class="list-inline-item1">Home</li>
<li class="list-inline-item1">All books</li>
<li class="list-inline-item1">All authors</li>
</ul>
{% endblock %}
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Here is my base.html:
<!DOCTYPE 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.0">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{{ url_for('dashboard') }}">SOM</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
</body>
</html>
profile.html:
{% extends "base.html" %}
<h3>{{user.username}}</h3>
When I go to the profile page it doesn't display the username but if I type something else there like <h1> Hello </h1> I can see it.
If you try
{% extends "base.html" %}
<h3>Hello, {{ user.username }}</h3>
and all you see is "Hello", your next step is to verify that you're passing a user key to render_template, and that the value has a non-blank username field.
Then take another look at the extends documentation, and note the part about overriding blocks.
I would like to add a simple navbar to my site using django-bootstrap3. The base.html document I am editing to create the navbar works with Twitter Bootstrap but does not with django-bootstrap3. The issue I am having is the button that is supposed to toggle the drop-down does not do anything when clicked. Has anyone encountered this problem before?
Here is my base.html:
<!DOCTYPE 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>{% block title %}{% endblock title %}</title>
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<style>
body {
padding-top: 70px;
}
</style>
<!--[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>
<!------Navbar ---------->
<header class = "navbar navbar-inverse navbar-fixed-top" role = "banner">
<div class = "container">
<div class ="navbar-header">
<button type = "button" class= "navbar-toggle" data-toggle = "collapse" data-target = "#dropdown">
<span class = "sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project Name
</div><!-- End Navbar Header-->
<div class = "collapse navbar-collapse" id = "dropdown">
<ul class = "nav navbar-nav navbar-right" role = "navigation">
<li>Home</li>
<li>New Page</li>
<li>New Page</li>
<li>New Page</li>
</ul>
</div><!-- End Nav Contents -->
</div><!-- End Container -->
</header>
The issue was that django-bootstrap3's javascript needs jquery installed (I had wrongfully assumed django-bootstrap3 did this automatically). As soon as I referenced jquery the problem was fixed immediately.
I know this topic is 2 years old but in case for everyone having the same issue in the futur, here the solution: in your template, replace:
{% bootstrap_javascript %}
By:
{% bootstrap_javascript jquery=1 %}
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 have to web page using django.
In html, I assign external image link to img src tag.
but, 403 forbidden error and not show image.
when I paste image external link to browser address, the image show.
I think.. it is referer checking. so I use ReferrerKiller.js in Changing the http referer in javascript.
first image is shown. but other is not.
I check network using chrome developer tool.
other image canceled. I don't know that.
I want to listen any idea about this problem.. Referer checking and why show only first image? other not?
below home.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title>
</head>
<body>
<h1> nanpa </h1>
<br/>
{% for entrySummary in entrySummaryList %}
title :
{{ entrySummary.entry_title }}
{{ entrySummary.entry_pub_date }} <br/>
description : {{ entrySummary.entry_description }} <br/>
image : <span id="image_kill_referrer"></span>
<!-- <img src= ("{{ entrySummary.entry_representaion_img }}"/> -->
<script>
document.getElementById('image_kill_referrer').innerHTML = ReferrerKiller.imageHtml("{{
entrySummary.entry_representaion_img }}");
</script>
{% endfor %}
</body>
</html>
document.getElementById() returns only one item (the first item, because all images in you code have same id). Use another methods like document.getElementsByClassName.
Try following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title>
</head>
<body>
<h1> nanpa </h1>
<br/>
{% for entrySummary in entrySummaryList %}
title :
{{ entrySummary.entry_title }}
{{ entrySummary.entry_pub_date }} <br/>
description : {{ entrySummary.entry_description }} <br/>
image : <span class="image_kill_referrer"></span>
{% endfor %}
<script>
var i, images = document.getElementsByClassName('image_kill_referrer');
var urls = [
{% for entrySummary in entrySummaryList %}
"{{ entrySummary.entry_representaion_img }}",
{% endfor %}
"DUMMY"
];
for (i = 0; i < images.length; i++) {
images[i].innerHTML = ReferrerKiller.imageHtml(urls[i]);
}
</script>
</body>
</html>
Or, use different id for each image:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="{% static "js/ReferrerKiller.js" %}"></script>
<title>island</title>
</head>
<body>
<h1> nanpa </h1>
<br/>
{% for entrySummary in entrySummaryList %}
title :
{{ entrySummary.entry_title }}
{{ entrySummary.entry_pub_date }} <br/>
description : {{ entrySummary.entry_description }} <br/>
image : <span id="image_kill_referrer{{ forloop.counter }}"></span>
<script>
document.getElementById('image_kill_referrer{{ forloop.counter }}').innerHTML = ReferrerKiller.imageHtml("{{
entrySummary.entry_representaion_img }}");
</script>
{% endfor %}
</body>
</html>