I'm developing an internal application and I would like to be able to nest my views to keep everything nice and organized. I plan on doing this by keeping different parts of the page in their own HTML files with their own Views (separate sidebar and navbar, separate charts, etc).
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
import Recall.data_logger.models as DLM
class ReportHome(TemplateView):
template_name = 'data_logger/index.html'
class SelectorSidebar(TemplateView):
template_name = 'data_logger/sidebar.html'
def get(self, request, *args, **kwargs):
companies = DLM.Company.objects.order_by('company_name').all()
return render(request, self.template_name, {'companies':companies,})
index.html
<html>
<head></head>
<body data-gr-c-s-loaded="true">
{% include 'data_logger/navbar.html' %}
<div class="container-fluid">
<div class="row">
{% include 'data_logger/sidebar.html' %} <!-- This is the part I need help with-->
</div>
</div>
</body>
</html>
sidebar.html
<div class="col-sm-3 col-md-1 sidebar">
<ul class="nav nav-sidebar">
{% for company in companies %}
<li>{{ company.company_name }}</li>
{% endfor %}
</ul>
</div>
I understand that by just using {% include 'data_logger/sidebar.html' %} it's just loading the HTML and bypassing SelectorSidebar, how do I direct it through the View?
I'd like a solution that allows me to access anything from a simple list of names to relitively large datasets being fed into a D3 chart.
Solution
This is what I ended up using:
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
crossorigin="anonymous"></script>
<script>
$.get("_sidebar", function(data, status){
$("#_sidebar").html(data);
});
</script>
</head>
<body data-gr-c-s-loaded="true">
{% include 'data_logger/navbar.html' %}
<div class="container-fluid">
<div class="row" id="_sidebar"></div>
</div>
</body>
</html>
Where _sidebar is the URL to SelectorSidebar:
urlpatterns = [
path('', v.ReportHome.as_view(), name='ReportHome'),
path('_sidebar', v.SelectorSidebar.as_view(), name='SelectorSidebar'),
]
I think you are making some confusion on how Django templates and views work together.
In very simple terms a Django template is what defines the HTML code that makes up a page. You can keep your templates very modular and organized; to do this you can use the include template tag or you can use template inheritance, which is a very powerful way to have "modular" templates.
A Django view is basically a function (or a class of you are using class based views) that receive an HTTP request and build an HTTP response.
It doesn't make much sense to have "nested" views because usually you have just one HTTP request and you want to build just a response with the HTML needed to display the page.
So I think that you can happily use Django templates to put together all the modules that make up your page (header, sidebar, etc.), but each page should correspond to a single Django view.
Another approach could use AJAX and Javascript to make different HTTP requests and build up the page client-side, but I think that this is not the approach you are considering here.
As #baxeico answered, you can't have multiple views to serve a page, because one HTTP request is one view.
If you have content that needs to appear on a lot of pages, like your sidebar, and that content also requires some context information to render (like a list of companies to fetch from the db), you have two options:
If the stuff required to add to the sidebar is fairly limited, create a template context processor that you add to the list of context processors in your settings (TEMPLATES setting).
def sidebar_context(request):
return {'companies': DLM.Company.objects.order_by('company_name').all()}
and in your settings, you'd add something like 'myapp.custom_contexts.sidebar_context' at the top of the list.
Now, every single template has access to the context variable companies, including your sidebar template.
If the stuff shown in the sidebar is more dynamic, or more complex, you should consider fetching the data from within the browser using AJAX. You would create a view that returns JSON instead of HTML and in your sidebar template add javascript to fetch the data and populate the sidebar.
The view is as simple as your current one:
def sidebar(request):
return JsonResponse({'companies': Company.objects.all().values('name', 'id')})
which will return a list of dicts containing name and id of each company. In your AJAX handler for the successful response (which receives the data), you can then loop through data and access data[i].name and data[i].id which you can use to populate your list.
I won't go as far as posting the full javascript (please search for jQuery, ajax and django) but here's a bit to give you an idea, assuming jQuery:
$(window).on('load', function() {
$.ajax({
url: "{% url 'sidebar' %}", // assuming this is inside a template, if not {% url %} won't work and you'll have to get it in a different way
success: function(data) {
if (data.length > 0) {
for (var i=0; i<data.length; i++) {
var elem = $("<li>" + data[i].name + "</li>")
$("#companies").append(elem)
}
}
})
})
Related
I'd like implement a solution where a user can make a request to the backend and since the request takes some time to get the answer from the backed.
I want to render the same page with a loading animation without javascript. For this purpose, I set a variable "show_loading" on "true" to display the loading animation via the hmtl-file. The code is as follows:
views.py
def UploadView(request):
show_loading = True
context["show_loading"] = show_loading
render(request,'UPLOAD.html',context)
data = {}
#something else happening, just logical operations
return render(request,'UPLOAD.html',context)
UPLOAD.html:
{% if show_loading %}
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
{% endif %}
The problem is that the render function is not working by the first render line (without return) but with the second render line (with return). So the question is, does render always need return or what I am doing wrong here, that the render does not work without return?
You cannot use the backend to update the page with a classic Django view, since to communicate with the frontend you need to return a response (yes, render must return). The easiest way is to use Javascript: set a simple timer that updates the page if it does not receive a response after a certain time. If you really want to use the backend you need to create a channel between the backend and the frontend, take a look at this.
I am trying to create a alert section for a menu (similar to the menu on this page https://metageeky.github.io/mega-menu/responsive-header.html)
*Each alert should have an effective date (date alert is “posted” live) and resolved date (date alert is “removed” live). Each alert will also have a maximum of one to two sentences of text describing situation.
The number of active/current alerts will appear in parenthesis following the icon and ALERT link text.
The icon and text are Dark Orange. When you hover over the icon and text, an underline appears.
When users click on the link, they are taken to a page that lists all active alerts. At bottom of page, message displays “If you are experiencing an issue, please contact us at....”
If there are no Alerts:
The number of alerts in parenthesis following the icon and link text will not appear.
Both the icon and alert text will be Primary Blue.
When Users click on the link, they are taken to a secondary alerts page that displays a message that says “There are currently no active alerts. If you are experiencing an issue, please contact us at...”
How would i achieve this?
Thank you.
There is a lot to unpack in your question but here is a high level approach.
1. Define your model
Read the Django docs on how to create a Model
Read the Django docs on what types of Fields exist
In your models.py, you will need to create a new model that has all the data you need for your requirements.
from django.db import models
class Alert(models.Model):
title = models.CharField()
description = models.TextField()
date_from = models.DateTimeField()
date_to = models.DateTimeField()
2. Ensure you can edit/manage your model data
Now you need to provide a way for your admin users to access the data model, edit & create items.
Wagtail has a great Snippets feature that allows this to work without too many changes, you will need to add #register_snippet on your model and also define some panels.
from wagtail.admin.edit_handlers import FieldPanel
from wagtail.snippets.models import register_snippet
from django.db import models
#register_snippet
class Alert(models.Model):
#... fields (defined above)
panels = [
FieldPanel('title'),
FieldPanel('description'),
FieldPanel('date_from'),
FieldPanel('date_to'),
]
def __str__(self):
return self.title
3. Prepare a template tag to show the queried data
Now you will need to work out how to query the model in a way that it will return the alerts based on your requirements (current date should be within the date range of the data).
Django has docs on writing queries
The simplest way to get the results of this query into the template will be with a custom Template Tag
An inclusion_tag is a way to have a small template fragment that can be used anywhere with custom data (without having to pass it into each View).
In the example below, you will still need to create the template file current_alerts.html which will contain how you want to render the alerts.
In your template tag template you can also use the page_url tag to provide a link to the alerts_page
# template_tags/custom_tags.py
# remember to create a template_tags/__init__.py file also
from django import template
from .models import Alert
register = template.Library()
#register.inclusion_tag('current_alerts.html')
def show_alerts():
# just returns all alerts, but this query can be refined to suit what you need
current_alerts = alerts.Objects.all()
alerts_page = AlertPage.Objects.all().first() # this assumes there will only ever be one
return {'alerts_page',alerts_page,'current_alerts': current_alerts}
4. Use your template tag & add styling
Now you need to include the tag at the top of the page inside your root/shared template.
{% extends "base.html" %}
{% load custom_tags %}
{% block body_class %}template-blogpage{% endblock %}
{% show_alerts %}
{% block content %}...{% endblock %}
5. Create a AlertsPage
You will need to create a new Page type to redirect users to within your alerts link.
https://docs.wagtail.io/en/stable/topics/pages.html
This Page can be anywhere in your tree and the Page's view template can also use the same shared template or you can pass the alerts to the view via the template context
I have a contact form that appears at the bottom of every page in the footer. I simply included it in my base.html at the bottom. Now i want to figure out a way to submit it. All the examples wagtail provides is under the assumption i have an entire page dedicated to it and hence submits to itself.
This cannot work for me as its not a page.
I have written pseudo code of what I think it should look like .
def submitContact(request):
source_email = request.POST.get('email')
name = request.POST.get('name')
message = request.POST.get('message')
if (source_email is not None) and (name is not None) and (message is not None):
body = "sample"
send_mail(
name,
message,
source_email,
['test#foobar'],
fail_silently=False,
)
Then my form would be something like this
<form class="form-group" role="form" method="post" action="/submitContact">
......
</form>
Ideally if someone could point to Wagtail resources that show how to create endpoints in models that do not inherit from the Page model and are not snippets that maintain "request" content that would be useful. Ideally what I would prefer is to log this data into contact "table" then send the email after.
What should I add to my urls.py to reroute the request with the correct context for the function to retrieve the required variables and thus send the email
Additional info
I wrapped a snippet around the footer to provide some context to it using templatetags, just putting this out there incase it adds value
See below.
#register.inclusion_tag('home/menus/footer.html', takes_context=True)
def footers(context):
return {
'footers': Footers.objects.first(),
'request': context['request'],
}
You should use {% url %} template tag.
urls.py :
from django.conf.urls import url
from yourapp.views import submitContact
urlpatterns = [
url(r'^contact/$', submitContact, name='contact'),
]
Template :
<form class="form-group" role="form" method="post" action="{% url 'contact' %}">
......
</form>
Another improvement is to use Django Form.
Note : prefer lower_case_with_underscores naming style for functions. Use CamelCase for classes. See PEP8 for more information.
Instead of trying to build it yourself, why not take a look at the already existing Form Builder of Wagtail?
It enables you to create a FormPage on which you can display a custom form and even E-mail the results.
Check out the documentation here.
I'm looking to use Gulp to render my Nunjucks templates with either gulp-nunjucks or gulp-nunjucks-render. Is there a way I can pass one or a series of .json files to the templating package to use the JSON data in my nunjucks templates?
Ideally I'd have a models/ directory with each page having corresponding page.json file with contents to be used in that template.
I'd like to know if it's possible with either of the above plugins and if so how it can be implemented. Any examples for a single or series of .json files would be very useful.
Look into using gulp-data https://www.npmjs.org/package/gulp-data it produces JSON from a any source, be it a JSON file, or database, that sends it down the stream via a new attribute on the file object (file.data). Your nunjucks plugin will need to be modified to consume that data property.
This worked for me, but in my case it didn't do quite everything I needed. With my gulpfile like the following:
//Compile Nunjucks Templates
gulp.task('nunjucks', function() {
nunjucksRender.nunjucks.configure(['templates/'])
return gulp.src('src/pages/*.html')
.pipe(nunjucksRender(nunjucksOptions))
.pipe(gulp.dest(output.html))
.pipe(reload({stream:true}));
});
Using gulp-data here to inject my JSON only provides data to the pages, and not to partials and macros I'm including. In my case, I'm using a central JSON settings file to emulate, for example, what my front end will look like when a user logs in:
{
"loggedin":false
}
and
{% if data.loggedin %}
<a href="#" class="nav__item nav__item--login">
<div class="nav__item--login_img">
<img src="http://pipsum.com/200x200.jpg" alt="" />
</div>
<p class="nav__item--login_user">JohnDoe345</p>
</a>
{% else %}
<a href="#login" data-lity class="nav__item nav__item--login">
<div class="nav__item--login_cta">Sign In</div>
</a>
{% endif %}
To make the file accessible to all templates/pages/partials/macros/etc. I'm using gulp-nunjucks-render's manageEnv setting as follows:
nunjucksOptions = {
path: ['src/pages/', 'src/templates/'],
watch:true,
manageEnv:function(env){
var data = JSON.parse(fs.readFileSync('states.json'));
env.addGlobal('data',data);
}
}
Thanks to Alex Ward for the tip on using fs for keeping my JSON from being cached.
I would like to take python generated matplotlib images and embed them into an HTML page that is generated by django. I am relatively new to django and have been struggling to get this to work. I can successfully generate a matplotlib image alone on a webpage but have been unable to embed into an HTML page. Django makes sense as my application will have many users that will have custom views with different data and frequently changing data coming from a database. I would like to avoid creating many static files.
I have looked at several posts but I am clearly missing something. For example:
Generating dynamic charts with Matplotlib in Django, images on django site from matplotlib and Dynamically serving a matplotlib image to the web using python.
I generate my matplotlib image view with temp and I think the wrapper is detail. detail does not seem to work. The filename plotdata.py and under the django tutorial example polls
from datetime import datetime, time
from django.http import HttpResponse
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
from django.contrib.auth.decorators import login_required
from django.shortcuts import render
#login_required()
def temp(request,x_id):
#... code to generate fig for ploting - works well
#This works but does not seem to pass file to HTML
canvas = FigureCanvas(fig)
response = HttpResponse(content_type='image/png')
canvas.print_png(response)
return response
#login_required()
def detail(request, x_id):
render(request, 'polls/plotdata.html', {'x_id': x_id})
My urls.py is as follows. temp works fine
from django.conf.urls import patterns, url
from django.views.generic import DetailView, ListView
from polls.models import Poll
from polls import plotdata
urlpatterns = patterns('',
#polls url chopped out for brevity - follows tutorial
url(r'^(?P<x_id>\d+)/plotdata/temp.png$', plotdata.temp, name='temp'),
url(r'^(?P<x_id>\d+)/plotdata/detail$', plotdata.detail, name='detail'),
)
My plotdata.html is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>{% block title %}Plotting Template{% endblock %}</title>
</head>
<body>
<div id="content">
{% block content %}
<img src="{% url 'temp' x_id %}" >
{% endblock %}
</div>
</body>
</html>
The error generated is as follows.
NoReverseMatch at /polls/1303070002/plotdata/detail
Reverse for 'temp' with arguments '('1303070002',)' and keyword arguments '{}' not found.
This probably not the only problem with the above. I am certain I have missed something critical.
I tried hardcoding, as a test, to
<img src="/polls/1303070002/plotdata/temp.png" >
but it generated the following error
ValueError at /polls/1303070002/plotdata/detail
The view polls.plotdata.detail didn't return an HttpResponse object.
I would like to get this framework working so I can put text and buttons around the data plot. I am open to other ways to more efficiently create a solution. Thank you very much for helping out!
Repaired code, plotadata.py, is as follows
#same header information from above before this line
canvas = FigureCanvas(fig) #This needs to remain for savefig or print_png command
response = HttpResponse(content_type='image/png')
fig.savefig(response, format='png') #Produces all white background
return response
def detail(request, salesorder_id):
return render(request, 'rsa/plotdata.html', {'x_id':x_id})
I included return before render this time... Changed path to hmtl file to avoid confusion with polls app. Using savefig versus print_png as it formats more generically. urls.py is the same. I am trying to get plotdata.html to work as above, passing a variable to url via {{ x_id }} but I am missing something. Same error as above, NoReverseMatch. If I replace, in plotdata.html
<img src="{% url 'temp' x_id %}" >
with
{% load staticfiles %}
<img src="{% static '/rsa/1303070001/plotdata/temp.png' %}" >
the image is embedded as desired. Now adding a dynamic path such as
<img src="{% static '/rsa/{{ x_id }}/plotdata/temp.png' %}" >
just escapes the literal x_id => /rsa/%7B%7B%20x_id%20%7D%7D/plotdata/temp.png. Trying x_id|safe ends up escaping the pipe and including literal safe... %7B%7B%20x_id%7Csafe%20%7D%7D. Hence I am trying to go back to using url versus static. Seems cleaner. I think there is something wrong with the variable I am passing, x_id