I have a Django app where users can create their lists and add to-dos. I want to add a new page which will show to-dos that had due dates. Like, in the page, there will be a section called "Earlier" which was feature tasks with missed due dates. Other sections would be "Today", "Tomorrow" and "Later on". Let me show my view class and HTML code now and explain my problem.
Class based view to handle this page:
class ToDoNextUpView(LoginRequiredMixin, ListView):
model = ToDo
template_name = "ToDo/next_up.html"
ordering = ["-due_date"]
context_object_name = "todos"
def get_queryset(self):
query_set = []
for todo in ToDo.objects.filter(creator=self.request.user, is_checked=False):
if todo.due_date is not None:
query_set.append(todo)
return query_set
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
today = datetime.datetime.now(datetime.timezone.utc)
tomorrow = today + datetime.timedelta(days=1)
todos_earlier = []
todos_today = []
todos_tomorrow = []
todos_later = []
for todo in ToDo.objects.filter(creator=self.request.user, is_checked=False):
if todo.due_date is not None:
if todo.due_date.day == today.day and todo.due_date.month == today.month and todo.due_date.year == today.year:
todos_today.append(todo)
elif todo.due_date.day == tomorrow.day and todo.due_date.month == tomorrow.month and todo.due_date.year == tomorrow.year:
todos_tomorrow.append(todo)
elif todo.due_date < today:
todos_earlier.append(todo)
elif todo.due_date > tomorrow:
todos_later.append(todo)
context["todos_earlier"] = todos_earlier
context["todos_today"] = todos_today
context["todos_tomorrow"] = todos_tomorrow
context["todos_later"] = todos_later
return context
And this is next_up.html
{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% if todos_earlier %}
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Earlier</h1></center>
<br>
{% for todo in todos_earlier %}
<article class="content-section">
<div class="media-body full-content">
<h2>
<button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
<i class="fa fa-check"></i>
</button>
<a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title"> {{ todo.title }}</a>
<button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
<i class="fas fa-trash"></i>
</button>
{% if not todo.important %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-secondary">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% else %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-warning">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% endif %}
</h2>
<h3 style="color:red">
Was due on: {{ todo.due_date|date:"F d" }}
</h3>
</div>
</article>
{% endfor %}
{% endif %}
{% if todos_today %}
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Today</h1></center>
<br>
{% for todo in todos_today %}
<article class="content-section">
<div class="media-body full-content">
<h2>
<button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
<i class="fa fa-check"></i>
</button>
<a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title"> {{ todo.title }}</a>
<button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
<i class="fas fa-trash"></i>
</button>
{% if not todo.important %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-secondary">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% else %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-warning">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% endif %}
</h2>
<h3 style="color:blue">
Due today
</h3>
</div>
</article>
{% endfor %}
{% endif %}
{% if todos_tomorrow %}
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Tomorrow</h1></center>
<br>
{% for todo in todos_tomorrow %}
<article class="content-section">
<div class="media-body full-content">
<h2>
<button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
<i class="fa fa-check"></i>
</button>
<a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title"> {{ todo.title }}</a>
<button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
<i class="fas fa-trash"></i>
</button>
{% if not todo.important %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-secondary">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% else %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-warning">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% endif %}
</h2>
<h3 style="color:green">
Due tomorrow
</h3>
</div>
</article>
{% endfor %}
{% endif %}
{% if todos_later %}
<br>
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Coming up later</h1></center>
<br>
{% for todo in todos_later %}
<article class="content-section">
<div class="media-body full-content">
<h2>
<button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
<i class="fa fa-check"></i>
</button>
<a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title"> {{ todo.title }}</a>
<button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
<i class="fas fa-trash"></i>
</button>
{% if not todo.important %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-secondary">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% else %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-warning">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% endif %}
</h2>
<h3 style="color:seagreen">
Due on: {{ todo.due_date|date:"F d" }}
</h3>
</div>
</article>
{% endfor %}
{% endif %}
{% endblock content %}
As you can see, I have written almost the exact same HTML code for every one of those sections. Although this technically works but I would never be able to live with myself. I have to write those check buttons four times, star buttons four times and everything else four times. This cannot be good.
Also, in my View, I have made some sloppy coding where I checked the date, month and year which didn't seem right. But I am aware that checking only the day is not good since same days can of be different months. And to be clear, these are DateTime objects so I cannot just equal them since the precise seconds won't match. But I guess this could still be okay. My main question here is what changes should I bring about in my HTML and Python code so that I can display all the sections within a single for loop (or maybe nested loops but I don't want to four same code four times).
Thanks.
I believe you should use Django's built-in template tag include for each todo section and for those includes make a file for each one of them extending a base generic one with the shared logic.
Below i show a example that could be used, now instead of writing 4 times the code just edit todo_generic.html
next_up.html
{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% if todos_earlier %}
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Earlier</h1></center>
<br>
{% include "todos_earlier.html" with todos=todos_earlier %}
{% endif %}
{% if todos_today %}
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Today</h1></center>
<br>
{% include "todos_today.html" with todos=todos_today %}
{% endif %}
{% if todos_tomorrow %}
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Tomorrow</h1></center>
<br>
{% include "todos_tomorrow.html" with todos=todos_tomorrow %}
{% endif %}
{% if todos_later %}
<br>
<center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Coming up later</h1></center>
<br>
{% include "todos_later.html" with todos=todos_later %}
{% endif %}
{% endblock content %}
todo_generic.html
{% for todo in todos %}
<article class="content-section">
<div class="media-body full-content">
<h2>
<button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
<i class="fa fa-check"></i>
</button>
<a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title"> {{ todo.title }}</a>
<button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
<i class="fas fa-trash"></i>
</button>
{% if not todo.important %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-secondary">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% else %}
<button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
type="submit" class="btn btn-warning">
<span aria-hidden="true"><i class="fas fa-star"></i></span>
</button>
{% endif %}
</h2>
{% block due %}{% endblock %}
</div>
</article>
{% endfor %}
todos_earlier.html
{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:red">
Was due on: {{ todo.due_date|date:"F d" }}
</h3>
{% endblock due %}
todos_today.html
{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:blue">
Due today
</h3>
{% endblock due %}
todos_tomorrow.html
{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:green">
Due tomorrow
</h3>
{% endblock due %}
todos_later.html
{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:seagreen">
Due on: {{ todo.due_date|date:"F d" }}
</h3>
{% endblock due %}
Related
My Django template renders the post.slug value in the first 'edit' form button correctly but on the modal pop up for the 'delete' it does not.
This was working a week or so ago. The 'Edit' button works perfectly, yet with almost identical code, under a Bootstrap modal (for confirmation of the post deletion) the 'Delete' button does not load the value="{{ post.slug }}"
my template:
{% extends "base.html" %}
{% block content %}
<div class="post-opinion">
<h3>{{ user }}'s Posts</h3>
</div>
<div class="container-fluid">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-12 mt-3 left">
<div class="row">
{% for post in post_list %}
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<div class="image-container">
{% if "placeholder" in post.featured_image.url %}
<img class="card-img-top"
src="https://codeinstitute.s3.amazonaws.com/fullstack/blog/default.jpg">
{% else %}
<img class="card-img-top" src=" {{ post.featured_image.url }}">
{% endif %}
<div class="image-flash">
<p class="author">Author: {{ post.author }}</p>
</div>
</div>
<a href="{% url 'post_detail' post.slug %}" class="post-link">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.excerpt }}</p>
</a>
<hr />
<p class="card-text text-muted h6">{{ post.created_on}} <i class="far fa-heart"></i>
{{ post.number_of_likes }}</p>
<div>
<form method="post">
{% csrf_token %}
<button type="submit" class="btn btn-primary mt-3" value="{{ post.slug }}" name="edit">Edit</button>
<button type="button" class="btn btn-danger mt-3" data-toggle="modal" data-target="#delete-confirmation">
Delete
</button>
</form>
</div>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:3 %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% if is_paginated %}
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li>« PREV </li>
{% endif %}
{% if page_obj.has_next %}
<li> NEXT »</li>
{% endif %}
</ul>
</nav>
{% endif %}
</div>
<div class="modal fade" id="delete-confirmation" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure you want to delete this post?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" class="d-inline">
{% csrf_token %}
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="{{ post.slug }}"
name="delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
All the questions I referred to on SO were displaying results of creating a dynamic dropdown where they made use of database, I am not making use of a database but making use of a CSV file to fetch data, so those answers couldn't help me
here is my app.py file
#app.route('/StatsPage', methods=['GET','POST'])
def StatsPage():
timeline=['Daily', 'Weekly', 'Monthly']
return render_template('StatsPage.html', timeline=timeline)
#app.route('/StatsPage/timing', methods=['GET','POST'])
def get_timeline(timing):
dates_dict=['2020-08-23', '2020-08-24', '2020-08-25', '2020-08-26', '2020-08-27', '2020-08-28', '2020-08-29', '2020-08-30', '2020-08-31', '2020-09-01', '2020-09-02', '2020-09-03', '2020-09-04', '2020-09-05', '2020-09-06', '2020-09-07', '2020-09-08', '2020-09-09']
months=['August', 'September']
week=['2020-08-23', '2020-08-30', '2020-09-06', '2020-09-13', '2020-09-20']
timelines={
'Daily': dates_dict,
'Weekly': week,
'Monthly': months
}
return jsonify(timelines[timing])
Here is my StatsPage.html file
{% extends "base.html" %}
{% block content %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
</div>
<div class="row">
<form method="POST" action="/StatsPage">
<select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color: #105583;" name="selectedTimeline">
<option style="color: #105583;" disabled selected value= "">Select the option</option>
{% for t in timeline %}
<option style="color: #105583;" value= "{{t}}" SELECTED>{{t}}</option>"
{% endfor %}
</select>
<select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color: #105583;" name="selectedDate">
{% for d in dates_dict %}
<option style="color: #105583;" value= "{{d}}" SELECTED>{{d}}</option>"
{% endfor %}
</select>
<button type="submit" name="" class="btn btn-outline-primary">Generate Results</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script>
$('select[name=selectedTimeline]').change(function() {
timing = this.value
$.get('/DailyStats/'+timing, function(data, status){
$('select[name=selectedDate]').html('')
data.forEach(function(date){
$('select[name=selectedDate]').append('<option>'+date+'</option>')
})
})
})
</script>
</div>
</article>
{% endblock content %}
All I want to do is
When the user selects the option Daily, the elements in the days_dict list should be displayed, when the user selects the option Weekly, the elements in the week list should be displayed and when the user selects the option Monthly the elements in the months list should be displayed.
I referred to this question on SO, for retrieving the option selected from the first dropdown using AJAX but it didn't help me
So please can someone help me to get this working
Result after answer1
You have to change the syntax in your flask URL. Also you can use AJAX
#app.route('/StatsPage/<timing>', methods=['GET','POST'])
def get_timeline(timing):
Include Jquery CDN.
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
</div>
<div class="row">
<form method="POST" action="/StatsPage">
<select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color: #105583;" name="selectedTimeline">
<option style="color: #105583;" disabled selected value= "">Select the option</option>
{% for t in timeline %}
<option style="color: #105583;" value= "{{t}}">{{t}}</option>
{% endfor %}
</select>
<select class="btn btn-secondary dropdown-toggle" style="background-color: #FFFFFF; color: #105583;" name="selectedDate">
{% for d in dates_dict %}
<option style="color: #105583;" value= "{{d}}">{{d}}</option>
{% endfor %}
</select>
<button type="submit" name="" class="btn btn-outline-primary">Generate Results</button>
</form>
</div>
</div>
</article>
<script>
$('select[name=selectedTimeline]').change(function() {
timing = this.value
$.get('/DailyStats/'+timing, function(data, status){
$('select[name=selectedDate]').html('')
data.forEach(function(date){
$('select[name=selectedDate]').append('<option>'+date+'</option>')
})
})
})
</script>
Im trying to create note detail in modal popup window.
Here is the modal invoke anchor tag
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'post_detail_view' %}" data-id="{{ todo_item.content }}" data-target="#modal" title="edit item" data-tooltip></a>
here is the view function in views.py:
def post_detail_view(request, content):
all_items1 = TodoItem.objects.get(content=content)
return render(request, 'todo.html', {'all_items1': all_items1})
here is my urls.py :
path('post_detail_view/<str:content>/', views.post_detail_view, name='post_detail_view'),
This is my modal code in todo.html
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="/addTodo/" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabe2">Edit Info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{% if all_items1 %}
<label for="content">Title :</label><br>
<p>{{ all_items1.content }}</p>
<p>{{ all_items1.data }}</p>
<input type="text" id='c' name="content" value="{{ all_items1.content }}"/><br>
<label for="data">Description :</label><br>
<textarea id="data" rows="4" cols="50" value="">{{ all_items1.data }}</textarea>
<br>
<label for="tags">Tags :</label><br>
<input type="tags" name="tags" value="{{ all_items1.tags }}"/><br>
<a href="{{ all_items1.file.url }}">
{% load static %}
<img src="{% static 'ico.png' %}" style="width:30px;height:30px" alt="download">
</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</form>
</div>
This code is not working. I can see modal is popping up but no data is displayed. I'm still learning Django. Can someone please help.
I think, your parameter is not passing to view layer. try this:
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'post_detail_view' todo_item.content %}" data-target="#modal" title="edit item" data-tooltip></a>
I have searched a lot, but couldn't find a solution. There are a lot of related questions being asked before and I think there's no mistake but there's still an error.
Reverse for 'update' with arguments '('',)' not found. 1 pattern(s) tried: ['vehicles_app/(?P<post_id>[0-9]+)/update_post/$']
Here is my index.html
{% for obj in context %}
<div class="container" style="padding-left:240px; padding-right:0px; width: 78%; margin-bottom:30px;">
<div class="well" style=" background-color: rgb(220, 220, 220);">
<div class="media">
<div class="media-body">
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h1 class="media-heading" style="margin-top:20px; margin-bottom:20px; color: black;">{{ obj.title }}</h1>
{% for img in obj.postpicture_set.filter %}
<div class="w3-content" style="max-width:800px">
{% if img.image %}
<img style="margin-bottom:30px; float: right" class="mySlides" src="{{ img.image.url }}" width="200" height="180">
{% endif %}
</div>
{% endfor %}
<p> {{ obj.details }} </p>
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-calendar"></i> {{ obj.date }} </span></li>
<li>|</li>
<span><i></i> {{ obj.brand }} </span>
<li>|</li>
<span><i></i> {{ obj.city }} </span><br>
<form action="{% url 'vehicles_app:data' obj.id %}" method="post">{% csrf_token %} <input type="hidden" name="post_id" value="{{ obj.id }}">
<input type="hidden" name="usr_id" value="{{ obj.user_id }}">
<td><input style="margin-top:70px; margin-bottom:20px; margin-left:10px;" type="submit" class="btn btn-primary" value="Details"</td></form>
{% if request.user == obj.user or request.user.is_superuser %}
<form action="{% url 'vehicles_app:file-delete' obj.id %}" method="post" style="display: inline;">{% csrf_token %} <input type="hidden" name="post_id" value="{{ obj.id }}">
<td><input style="margin-top:70px; margin-bottom:20px; margin-left:10px;" type="submit" value="Delete" class="btn btn-danger btn-sm"</td></form>
<form action="{% url 'vehicles_app:update' obj.id %}" method="post" style="display: inline;">{% csrf_token %}<input type="hidden" name="post_id" value="{{ obj.id }}">
<td><input style="margin-top:70px; margin-bottom:20px; margin-left:10px;" type="submit" value="Update" class="btn btn-default btn-sm"</td></form>
{% else %}
{% endif %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
Here is views.py
def update_post(request, post_id):
ImageFormSet = modelformset_factory(
PostPicture,
form=AddPictures,
extra=10,
min_num=1
)
post_form = get_object_or_404(Posts, pk=post_id)
if request.method == "POST":
form = AddFile(request.POST, instance=post_form)
formset = ImageFormSet(
queryset=PostPicture.objects.filter(
post=post_id
)
)
if form.is_valid() and formset.is_valid():
form.save()
for form in formset:
if form:
image = form['image']
photo = PostPicture(post=form, image=image)
photo.save()
messages.success(
request, 'Post submitted Successfully!'
)
return render(
request,
'vehicles_app/update_post.html',
{
'form': form,
'formset': formset,
'post_form':post_form
}
)
else:
print(form.errors, formset.errors)
else:
form = AddFile()
formset = ImageFormSet(
queryset=PostPicture.objects.none()
)
return render(
request,
'vehicles_app/update_post.html',
{
'form': form,
'formset': formset,
'post_form':post_form
}
)
Here is the url for my update, only update is not working, but other things like data and delete are working fine.
urlpatterns = [
url(r'^signUp/$', views.signUp, name='signUp'),
url(r'^user_login/$', views.user_login, name='user_login'),
url(r'^addfile/$', views.addfile, name='addfile'),
url(r'^(?P<pk>[0-9]+)/delete/$', views.FileDelete.as_view(), name='file-delete'),
url(r'^(?P<post_id>[0-9]+)/data/$', views.data, name='data'),
url(r'^(?P<post_id>[0-9]+)/update_post/$', views.update_post, name='update'),
url(r'^myposts/$', views.myposts, name='myposts'),
url(r'^received/$', views.received, name='received'),
url(r'^received_files/$', views.received_files, name='received_files'),
]
here is my update_post.html
{% extends "vehicles_app/index.html" %}
{% block body_block %}
{% load staticfiles %}
<html>
<body>
<div class="container" id="addfile_form" style="margin- left:200px; width: 78%;">
<!-- <div class="col-xs-12 col-sm-4 col-md-6 col-sm-offset-2 col- md-offset-2"> -->
<div class="panel panel-default">
<div>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<h2 style="margin-left:100px;"> {{ message }} </h2>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="panel-heading">
<b><h2 id="post_head" class="panel-title">Update Post here!</h2>
</b>
</div>
<div class="panel-body">
<form id="post_form" method="post" action="{% url
'vehicles_app:update_post' post_id %}"
enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group">
<div style="float: left; width: 50%">
<label for="title">Ad Title</label>
</div>
<div class="title" style="float: right; width: 45%">
<input type="text" name="title" placeholder="Type Here"
value='{{ form.title.value }}' required>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="city">City</label>
</div>
<div class="city" style="float: right; width: 45%">
<select name="city" value='{{ form.city.value }}'>
<option selected="selected"
value="islamabad">Islamabad</option>
<option value="karachi">Karachi</option>
<option value="lahore">Lahore</option>
<option value="peshawar">Peshawar</option>
<option value="quetta">Quetta</option>
<option value="multan">Multan</option>
<option value="faisalabad">Faisalabad</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="price">Price</label>
</div>
<div class="price" style="float: right; width: 45%">
<input type="text" name="price" placeholder="Type Here"
value='{{ form.price.value }}' required>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="brand">Brand</label>
</div>
<div class="brand" style="float: right; width: 45%">
<select name="brand" value='{{ form.brand.value }}'>
<option selected="selected"
value="honda">Honda</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
<option value="lexus">Lexus</option>
<option value="hyundai">Hyundai</option>
<option value="jeep">Jeep</option>
<option value="mazda">Mazda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="daewoo">Daewoo</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="modelyear">Model-Year</label>
</div>
<div class="modelyear" style="float: right; width: 45%">
<input type="text" name="modelyear"
placeholder="ie:1970-2018" value='{{ form.modelyear.value }}' required>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="condition">Condition</label>
</div>
<div class="condition" style="float: right; width: 45%">
<select name="condition" value='{{ form.condition.value
}}'>
<option selected="selected" value="new">NEW</option>
<option value="used">USED</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="mileage">Mileage</label>
</div>
<div class=mileage style="float: right; width: 45%">
<input type="text" name="mileage" placeholder="ie:50000"
value='{{ form.mileage.value }}' required>
</div>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="details">Type details here</label>
</div>
<div class="details" style="float: right; width: 45%">
<textarea name="details" rows="9" cols="45" value='{{
form.details.value }}' required></textarea>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
{{ formset.management_form }}
{% if formset %}
{% for form in formset %}
{% if form %}
<table class="display" cellspacing="1" width="100%">
<tr>
<td>{{ form }}</td>
</tr>
</table>
{% endif %}
{% endfor %}
{% endif %}
<input type="submit" name="submit" value="Update" class="btn
btn-info" id="post_btn">
</form>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
{% endblock %}
The error is coming from this url tag in your update_post.html template.
<form id="post_form" method="post" action="{% url 'vehicles_app:update_post' post_id %}"
You get the error with arguments '('',)' in the error message because you haven't included post_id in the template context. You can add it with:
return render(request, 'vehicles_app/update_post.html', {
'form': form,
'formset': formset,
'post_form': post_form,
'post_id': post_id,
})
Remember to do this for GET and POST requests.
I'm trying to sort the panels onto that way:
image screen - please enter to see:
But I've got more than 6 columns (it's 9). I'm looking forward to set 4 on the LEFT, 4 on the RIGHT and 1 in CONTENT.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
<div class="panel-body">
<ul>
{% for playerT in playersT %}
<li>{{playerT.tournament_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4 ">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
<div class="panel-body">
<ul>
{% for tournament in ctournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje turnieje:</div>
<div class="panel-body">
<ul>
{% for tournament in mtournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje drużyny:</div>
<div class="panel-body">
<ul>
{% for team in teams %}
<li>{{team.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenie do drużyny:</div>
<div class="panel-body">
<ul>
{% if playerteam %}
<li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
Akceptuj </a></li>
{% endif%}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
<div class="panel-body">
<ul>
{% for player in AplayersT %}
<li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
Akceptuj </a></li>
{% endfor%}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<br>
{% for EplayerT in EplayersT %}
<tr>
<td class="col-md-3" align="center"><a
href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
<td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
zgłoszony do {{ EplayerT.tournament_id.name }}
</td>
<td class="col-md-3" align="center"> Akceptuj zawodnika</td>
</tr>
{% endfor %}
</table>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Przynależność do drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
</div>
But now it looks:
image screen - please enter to see:
Does anyone has an idea how to sort it ? Thanks for each solution!
Are you looking for a layout like this? In that case I would suggest you to create three columns and simply put four panels inside the left and right column. Also has the advantage that the top of panel 2 isn't dependent on the bottom of panel 6.
.box {
font-family: Arial;
font-size: 24px;
border: 1px solid #f99;
background-color: #fee;
color: #333;
padding: 10px;
height: 75px;
margin-bottom: 10px;
}
.box.box--100 {
height: 100px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="box">1</div>
<div class="box box--100">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="col-xs-4">
<div class="box">5</div>
</div>
<div class="col-xs-4">
<div class="box box--100">6</div>
<div class="box">7</div>
<div class="box box--100">8</div>
<div class="box box--100">9</div>
</div>
</div>
</div>