I am trying to integrate Htmx with django and achieve single page application behaviour. I am rewritting Djangoproject.com poll app with htmx. When I click on detail page link, content loads, htmx push a new url in address bar. When I press back button, it took me to index page perfectly for the first time, after that if I again go to detail page and click back button, url shows of the index, button index content doesn’t load, content remains same as detail page.
Here is my code
views.py
def index(request):
latest_question_list = Question.objects.filter(pub_date__lte=timezone.now()).order_by('-pub_date')[:5]
context = {'latest_question_list': latest_question_list}
if request.headers.get("Hx-Request") is not None:
return render(request, 'main/index/index.html', context)
else:
return render(request, 'main/index/index-full.html', context)
def detail(request, question_id):
question = get_object_or_404(Question, pk=question_id)
print(request.headers.get("Hx-Request"))
if request.headers.get("Hx-Request") is not None:
return render(request, 'main/detail/detail.html', {'question': question})
else:
return render(request, 'main/detail/detail-full.html', {'question': question})
index.html
<div id="index" class="">
{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><div class="has-text-link" hx-get="{% url 'main:detail' question.id %}" hx-push-url="true" hx-target="#index" hx-swap="outerHTML">{{ question.question_text }}</div></li>
{% endfor %}
</ul>
{% else %}
<p>
No polls are available.
</p>
{% endif %}
</div>
index-full.html
{% extends 'base.html' %}
{% block content %}
{% include 'main/index/index.html' %}
{% endblock content %}
detail.html
<div id="detail" class="">
<form action="{% url 'main:vote' question.id %}" method="post">
{% csrf_token %}
<fieldset>
<legend><h1>{{ question.question_text }}</h1></legend>
{% if error_message %}<p>
<strong>{{ error_message }}</strong>
</p>
{% endif %}
{% for choice in question.choice_set.all %}
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
{% endfor %}
</fieldset>
<input type="submit" value="Vote">
</form>
</div>
detail-full.html
{% extends 'base.html' %}
{% block content %}
{% include 'main/detail/detail.html %}
{% endblock content %}
I found no error in browser console, no error in terminal
Now, I know I can put a back button in detail page that can took me to index page. But user won't use that, they will just use the back button on their device.
Adding this javascript code you can reload the page when the user click the back button:
var auxBack = performance.getEntriesByType("navigation");
if (auxBack[0].type === "back_forward") {
location.reload(true);
}
Related
Recently implemented pagination for the blog in Flask.
{% block footer %}
{% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
{% if page_num %}
{% if posts.page == page_num %}
<a class="btn btn-warning mb-4" href="{{ url_for ('views.home', page = page_num )}}">{{page_num}}</a>
{% else %}
<a class="btn btn-outline-warning mb-4" href="{{ url_for ('views.home', page = page_num )}}">{{page_num}}</a>
{% endif %}
{% else %}
{% endif %}
{% endfor %}
{% endblock %}
Once user click on the post title app redirecting to the article page. But I would like to implement the button that brings the user BACK to the page that current post published on.
If there is a way I can manage it??
views = Blueprint('views', name)
#views.route('/')
#views.route('/home')
def home():
page = request.args.get('page', 1, type=int)
posts = Post.query.order_by(Post.datetime.desc()).paginate(page=page, per_page=3)
return render_template("home.html", user=current_user, posts=posts )
there is a trouble I'm new to django and there is an issue I can't understand,
there is a view:
def article(request, article_id = 1, comments_page_number = 1):
all_comments = Comments.objects.filter(comments_article_id = article_id)
paginator = Paginator(all_comments, 2)
comment_form = CommentForm
args = {}
args.update(csrf(request))
args['article'] = Article.objects.get(id = article_id)
args['comments'] = paginator.page(comments_page_number)
args['form'] = comment_form
args['username'] = auth.get_user(request).username
return render_to_response('article.html', args)
there is a template article.html
{% extends 'main.html' %}
{% block article %}
<h4>{{article.article_date}}</h4>
<h2>{{article.article_title}}</h2>
<p> {{article.article_body}}</p>
<hr>
<div class="large-offset-1 large-8 columns">
<p>Комментарии: </p>
{% for comment in comments %}
<p>{{comment.comments_text}}</p>
<hr>
{% endfor %}
{% if username %}
<form action="/articles/addcomment/{{article.id}}/" method="POST" >
{% csrf_token %}
{{form }}
<input type="submit" class="button" value="Add comment">
</form>
{% endif %}
</div>
<div class="row">
<div class="large-3 large-offset-5 columns">
<ul class="pagination">
{% if comments.has_previous %}
<li class="arrow">«</li>
{% else %}
<li class="arrow unavailable">«</li>
{% endif %}
{% for page in comments.paginator.page_range %}
{% if page == comments.number %}
<li class="current">{{ page }}</li>
{% else %}
<li>{{ page }}</li>
{% endif %}
{% endfor %}
{% if comments.has_next %}
<li class="arrow">»</li>
{% else %}
<li class="arrow unavailable">»</li>
{% endif %}
</ul>
</div>
</div>
{% endblock %}
this is my article/urls.py
urlpatterns = patterns('',
url(r'^articles/get/(?P<article_id>\d+)/$','article.views.article'),
url(r'^articles/get/(?P<article_id>\d+)/comments/(\d+)/$', 'article.views.article'),
)
after that on my article page appeared an pages pagination, but when I'm clicking on the second page, for example, it it is just changing my url, but new comments are not appearing, just old ones.
What should I do to do this right? Thank you very much!
Your variable name comments_page_number uses always the default value. Name your second parameter in the url route to match this variable name.
you need :
url(r'^articles/get/(?P<article_id>\d+)/comments/(?P<comments_page_number>\d+)/$', 'article.views.this_article'),
I followed this tutorial: Need a minimal Django file upload example
Obviously it works. But I want to be able to delete a file as well. Now even if I delete it manually from disc, it still appears on list, even after reconnecting to a server (why?)
I changed the list.html file by adding another form in the loop:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minimal Django File Upload Example</title>
</head>
<body>
<!-- List of uploaded documents -->
{% if documents %}
<ul>
{% for document in documents %}
<li>{{ document.docfile.name }}
{% if user.is_staff %}
<form action="{% url 'delete' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="submit" value="Delete" />
</form>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<p>No documents.</p>
{% endif %}
<!-- Upload form. Note enctype attribute! -->
<form action="{% url 'list' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
<p>
{{ form.docfile.errors }}
{{ form.docfile }}
</p>
<p><input type="submit" value="Upload" /></p>
</form>
</body>
</html>
As you can see, I added Delete button in a form. By doing so, I have a button near each file. I added this to my views :
def delete(request):
if request.method != 'POST':
raise HTTP404
else:
docId = request.POST.get('docfile', None)
if docId is not None:
docToDel = Document.objects.get(pk=docId)
docToDel.delete()
form = DocumentForm(request.POST, request.FILES)
documents = Document.objects.all()
return HttpResponseRedirect(reverse('myapp.views.list'))
But that does not do anything, just reloads the page.
As I said, now I cannot even delete them manually.
What am I doing wrong?
First of all file on disk and model in DB are different things. To delete file from disk and DB you may try this
from django.shortcuts import get_object_or_404
def delete(request):
if request.method != 'POST':
raise HTTP404
docId = request.POST.get('docfile', None)
docToDel = get_object_or_404(Document, pk = docId)
docToDel.docfile.delete()
docToDel.delete()
return HttpResponseRedirect(reverse('myapp.views.list'))
Also you forgot to specify ID of Document to delete
<!-- List of uploaded documents -->
{% if documents %}
<ul>
{% for document in documents %}
<li>{{ document.docfile.name }}
{% if user.is_staff %}
<form action="{% url 'delete' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="hidden" name="docfile" value="{{ document.pk }}" />
<input type="submit" value="Delete" />
</form>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<p>No documents.</p>
{% endif %}
I want to be able to change some settings from django admin, for example: site title or footer. I want to have app with model which includes this settings, but this settings should be in single copy. What the best way to do it?
You can create a view with #staff_member_required decorator, which renders/saves a form:
from django.contrib.admin.views.decorators import staff_member_required
...
#staff_member_required
def edit_config(request, ):
saved = False
if request.method == "POST":
form = ConfigForm(request.POST)
if form.is_valid():
...
# Do saving here
saved = True
else:
form = ConfigForm()
...
context = {
'form': form,
'saved': saved,
}
return render_to_response('staff/edit_config.html', context, context_instance=RequestContext(request))
Use django forms in the view, and pass it to the template.
then, in the template extend 'admin/base_site.html' so your form has a admin look and feel. Here's a sample template:
{% extends 'admin/base_site.html' %}
{% load i18n adminmedia %}
{% block title %}Edit Configuration {{ block.super }} {% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/forms.css" />{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
{% trans "Home" %} > Edit Configuration
</div>
{% endblock %}
{% block content %}
<h1>Edit Configuration</h1>
{% if saved %}
<p class="success" style="background-color:#9F9; padding: 10px; border: 1px dotted #999;">
Settings were saved successfully!
</p>
{% endif %}
<form method="POST" action="">
{% csrf_token %}
<fieldset class="module aligned">
<h2>Configuration</h2>
<div class="description"></div>
{% for field in form %}
<div class="form-row {% if field.errors %}errors{% endif %}">
{{ field.errors }}
<div class="field-box">
{{ field.label }} : {{ field }}
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
</div>
{% endfor %}
</fieldset>
<div class="submit-row">
<input type="submit" value="{% trans 'Save' %}" class="default" name="_save"/>
</div>
</form>
{% endblock %}
You can use database, ini files, redis, ... for storing your configuration. You may define some general backend, and inherit your custom backends from it so it's flexible.
Sounds like django-constance would be a good fit.
Though django-flatblocks might be sufficient.
django-flatblocks is a simple application for handling small
text-blocks on websites. Think about it like django.contrib.flatpages
just not for a whole page but for only parts of it, like an
information text describing what you can do on a site.
I thought for whatever reason this would be easy to do, but I looked deeper and it appears there is no straightforward way to allow users to execute custom admin actions on the "change" view of an instance (i.e. when you are just viewing the edit screen for a single instance, not the list of instances).
Am I overlooking an easy way to do this? Or is my only choice to override one of the admin templates (and probably the ModelAdmin.add_view method)?
Here is update and improvement of this answer. It works with django 1.6 and redirects to where you came from.
class ActionInChangeFormMixin(object):
def response_action(self, request, queryset):
"""
Prefer http referer for redirect
"""
response = super(ActionInChangeFormMixin, self).response_action(request,
queryset)
if isinstance(response, HttpResponseRedirect):
response['Location'] = request.META.get('HTTP_REFERER', response.url)
return response
def change_view(self, request, object_id, extra_context=None):
actions = self.get_actions(request)
if actions:
action_form = self.action_form(auto_id=None)
action_form.fields['action'].choices = self.get_action_choices(request)
else:
action_form = None
extra_context=extra_context or {}
extra_context['action_form'] = action_form
return super(ActionInChangeFormMixin, self).change_view(request, object_id, extra_context=extra_context)
class MyModelAdmin(ActionInChangeFormMixin, ModelAdmin):
......
Template:
{% extends "admin/change_form.html" %}
{% load i18n admin_static admin_list admin_urls %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}" />
{% endblock %}
{% block object-tools %}
{{ block.super }}
<div id="changelist">
<form action="{% url opts|admin_urlname:'changelist' %}" method="POST">{% csrf_token %}
{% admin_actions %}
<input type="hidden" name="_selected_action" value="{{ object_id }}">
</form>
</div>
{% endblock %}
Here's what I ended up doing.
First, I extended the change_view of the ModelAdmin object as follows:
def change_view(self, request, object_id, extra_context=None):
actions = self.get_actions(request)
if actions:
action_form = self.action_form(auto_id=None)
action_form.fields['action'].choices = self.get_action_choices(request)
else:
action_form = None
changelist_url = urlresolvers.reverse('admin:checkout_order_changelist')
return super(OrderAdmin, self).change_view(request, object_id, extra_context={
'action_form': action_form,
'changelist_url': changelist_url
})
Basically we're just gathering the data needed to populate the actions dropdown on the change view.
Then I just extended change_form.html for the model in question:
{% extends "admin/change_form.html" %}
{% load i18n adminmedia admin_list %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/changelists.css" />
{% endblock %}
{% block object-tools %}
{{ block.super }}
<div id="changelist">
<form action="{{ changelist_url }}" method="POST">{% csrf_token %}
{% admin_actions %}
<input type="hidden" name="_selected_action" value="{{ object_id }}">
</form>
</div>
{% endblock %}
This is almost identical to how the admin actions section is outputted on the change list view. The main differences are: 1) I had to specify a URL for the form to post to, 2) instead of a checkbox to specify which object(s) should be changed, the value is set via a hidden form field, and 3) I included the CSS for the change list view, and stuck the actions in a div with id of #changelist -- just so the box would look halfway decent.
Not a great solution, but it works okay and requires no additional configuration for additional actions you might add.
What I did was create my own MYAPP/templates/admin/MYMODEL/change_form.html template:
{% extends "admin/change_form.html" %}
{% load i18n %}
{% block object-tools %}
{% if change %}{% if not is_popup %}
<ul class="object-tools">
<li><a href="{% url MY_COMMAND_VIEW original.id %}" class="historylink" >MY COMMAND</a></li>
<li>{% trans "History" %}</li>
{% if has_absolute_url %}<li>{% trans "View on site" %}</li>{% endif%}
</ul>
{% endif %}{% endif %}
{% endblock %}
So I basically only changed the block "object-tools" where the history-link and the "view on site"-link are. the rest of the original change_form.html remains untouched.
BTW: "original.id" is the id of the model you are editing.