This question already has an answer here:
How to load more content in django application?
(1 answer)
Closed 3 years ago.
In the profile page, I want to display posts of a user. Each post might have several comments, I don't want to display all the comments to the post instead I want to display only few comments and add load more comments option. If a user clicks load more comments then I want to display some more comments. What is better way to do this? I am already using infinite scroll using pagination for posts. I think this may not work for comments.
My currents code looks like below
{% for post in post_queryset %}
<div class="title">
{{ post.title }}
</div>
{% for comment in post.comments.all %}
</div>
{{ comment.text }}
</div>
{% endfor %}
{% endfor %}
Above code simplified version of original to make things easier.
For dynamic page content, the best way to go is to use jquery and bootstrap.
When rendering the template, you could add the class "d-none" (which hides the content of the element) in the 10th or latter element:
{% for post in post_queryset %}
<div name="comment-block">
<div class="title">
{{ post.title }}
</div>
{% for comment in post.comments.all %}
<div {% if forloop.counter > 9 %} class="d-none" {% endif %} >
{{ comment.text }}
</div>
{% endfor %}
<button type="button" name="more_comments" class="btn btn-primary" > more comments </button>
</div>
{% endfor %}
This way, all the comments will be rendered, but only the first 10 will be on display.
After that, a jquery function triggered by the button click should do the trick
$("[name='more_comments']".click(function(){
var hidden_comments = $(this).parent().find('.d-none'); // selects all hidden comments
$(hidden_comments).each(function(){$(this).removeClass('d-none')}); // removes 'd-none' class
})
Keep in mind that your original code, neither my answer, does not comply with bootstrap, which is highly recommended. You can learn more about bootstrap in https://getbootstrap.com/.
Related
I have a template in flask,and I want that a button will be showed inside a form element.
Basically what I'm trying to do is to show comment one after another with edit button between comments (according to the user that is login now).
This is the relevant part of the template:
<div id='containerComment'>
{% for comment in comments_post %}
<div class='show_comment'>
<p>{{ comment['body'] }}</p>
<p class="about">by {{ comment_publishers[loop.index0] }} on {{ comment_times[loop.index0]}}</p>
</div>
{% if comment_publishers[loop.index0]==g.user['username'] %}
<form action="{{ url_for('blog.update_comment', id=comment['id'] )}}" method="get" id='Edit'>
<button name="edit" value='edit' id='toEdit' class='bo' type="submit" style='background-image: linear-gradient(#37ADB2, #329CA0)'>Edit</button>
</form>
{% endif %}
{% endfor %}
</div>
All comments are showing with form element containing the edit button after them,except first comment, which is only button alone without form containing him.How to solve this?
All comments have after them (except first comment):
<form>
<button></button>
</form>
First comment has after it:
<button></button>
Edit:
If I do this:
{% if comment_publishers[loop.index0]==g.user['username'] %}
{% if loop.index0==0 %}
<form>
</form>
{% endif %}
<form action="{{ url_for('blog.update_comment', id=comment['id'] )}}" method="get" id='Edit'>
<button name="edit" value='edit' id='toEdit' class='bo' type="submit" style='background-image: linear-gradient(#37ADB2, #329CA0)'>Edit</button>
</form>
{% endif %}
Then it showing the form containing the edit button after the first comment,but somehow it don't show the empty form element when I check in developer tools.When I enter text in this empty form,it showing only this text without form.Very strange.Need explanation for why it always erasing the first form of my loop.
I am aware that this is very likely a duplicate but solutions provided in alike questions did not help.
This is at first glance very straightforward issue, it should work by all means but for some reason, it does not.
In a Django template, I am filtering a queryset of records based on the current user. Then I loop through it and want to display each result separately. Nothing complicated. The code goes:
{% if user.is_authenticated %}
{% if user.quick_links.all %}
{{ user.quick_links.all }}
<h2>Moje rychlé přístupy:</h2>
{% for link in user.quick_liks.all %}
<div class="col-md-2">
<button class="btn btn-info">{{ link.link_name }</button>
</div>
{% endfor %}
{% endif %}
{% endif %}
the {{ user.quick_links.all }} displays
<QuerySet [<UserQuickAccessLink: Link uživatele david#email.eu: Google>, <UserQuickAccessLink: Link uživatele david#email.eu: Coding Music>]>
but then the program never enters the for loop even though the iterable is clearly there.
{% for link in user.quick_liks.all %}
<div class="col-md-2">
<button class="btn btn-info">{{ link.link_name }} </button>
</div>
{% endfor %}
The above is never executed.
What is the trick here?
If that is your actual code, in your for loop you have a typo;
It's supposed to be
{% for link in user.quick_links.all %}
and not
{% for link in user.quick_liks.all %}
I'm learning Django by making a news / blog web app. On my home page i would like to list my articles so i made a simple template with this :
{% for article in last_articles %}
<div class="article">
<h3>{{ article.title }}</h3>
<p>{{ article.content | truncatewords_html:80 | safe }}</p>
<p>Read More </p>
</div>
<br/>
<hr/>
{% empty %}
<p>Nothing for the moment</p>
{% endfor %}
The problem is that I have some pictures on my article.content so my question is : Is there a way to remove them like truncatewords but for picture. I didn't find solutions on official doc.
Thanks
I'm working with Django and I'm trying to line up a Bootstrap button with a select field. I've got the form inline where I'd like it to be, but I can't seem to make the button smaller to make it align properly. I'm sure there is a simple solution but I've been struggling with this for hours and can't seem to find anything that works for me. Here is a picture as it is currently to give you a better idea of the problem: button not aligned
And here is my current code in my template:
<form class="form-inline" action="{% url 'displayStats:proindvleaders'%}" method="post">
{% csrf_token %}
<div class="row">
{{ form.as_p }}
<button id="submit" type="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
I've tried just setting height on the button ID with css but it doesn't seem to be working for me. Any ideas?
By default bootstrap btn class has padding. Inspect the code in a browser and remove that padding, either by adding a new padding class, or use custom styling class and remove btn, btn-primary etc, but all the same, its better to edit the form, rather than button. Bootstrap default buttons are perfect for most scenario, and most probably you need form styling. I suggest form styling. Below is an example from code.
Ps: i'm replying from phone, code may not be formatted
{% for field in form %}
<div class="fieldWrapper">{{ field.errors }}
<input type="{{ field.field.widget.input_type }}" name="{{ field.html_name }}" id="{{field.id_for_label}}" class="col-12 input-login" placeholder="{{field.label}}" >
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
{% endfor %}
I have a skeleton.html template, and i have a archives box in my blog. So i have to update in every function in my views or there is one simple way to do that? like a global variable takes the latest and the newest post's year then i will use in my templates?
And when i extend another template like:
{% extends "base.html" %}
{% load static %}
{% block title %}{{ title }}{% endblock %}
{% block css %}<link rel="stylesheet" href="{% static "css/style.css" %}"/>{% endblock %}
{% block contentRight %}
<div id="search">
<h2>Search</h2>
<form action="#" method="POST">
<input type="text" name="searchbox"/>
<input type="submit" name="submit" value="Search"/>
</form>
</div>
<div id="archives">
<h2>Archives</h2>
<ul>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</div>
{% endblock %}
title is in my views.py home function, when i create another html file and extend index and pass the title block it loads nothing...
sry for my bad english and noobish question~im new in django
You can define your own RequestContext processor, query the years you want in years_processor:
def years_processor(request):
return {'years': range(2013, 2010, -1)}
Add it to TEMPLATE_CONTEXT_PROCESSORS, then use years directly in your every template.
<ul>
{% for year in years %}
<li>{{ year }}</li>
{% endfor %}
</ul>
Keep in mind that you should use render or pass context explictly.