Django. Reply for comments getting posted as comments. How to have the reply for comments?

Question

Hey I am quite new to django, I have this function for comments and replies,the problem is I can't have the reply to comments instead it is getting posted as comments. How to have this replies under respective comments? Here is my model and functions.

model

class Comment(models.Model):
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
post = models.ForeignKey(Post, on_delete=models.CASCADE)
reply = models.ForeignKey('Comment', null=True, related_name='replies', blank=True, on_delete=models.CASCADE)
content = models.TextField(max_length=1000)
timestamp = models.DateTimeField(auto_now_add=True)

views

def comment_section(request, slug):
user = request.user
post = get_object_or_404(Post, slug=slug)
comments = Comment.objects.filter(post=post, reply=None).order_by('-id')
if request.POST:
    comment_form = CommentForm(request.POST or None)
    if comment_form.is_valid():
        content = request.POST.get('content')
        reply_id = request.POST.get('comment_id') #reply-section
        comment_qs = None
        if reply_id:
            comment_qs = Comment.objects.get(id=reply_id)
        comment = Comment.objects.create(post=post, user=request.user, content=content, reply=comment_qs)
        comment.save()
else:
    comment_form = CommentForm()
context = {
    'post':post,
    'comment_form':comment_form,
    'comments': comments,
}
if request.is_ajax():
    html = render_to_string('posts/comment_section.html', context, request=request)
    return JsonResponse({'form': html})

html

<!-- Comment showing section -->
<div class="main-comment-section">
    <div class="container-fluid mt-2">
        <div class="form-group row">
            <!-- Comment Form -->
            <form class="comment-form" method="post" action="{% url 'posts:comment_section' post.slug %}">
                {% csrf_token %}
                <div class="form-group">
                    <textarea name="content" cols="60" rows="2" maxlength="1000" required="" id="id_content"></textarea>
                </div>
                <button type="submit" value="submit" class="btn-sm btn-outline-warning" style="color: black;">Comment</button>
            </form>
            <!-- Comment Form end -->
        </div>
    </div>


        {% if not post.comment_set.all %}
             <small>No comments to display</small>
        {% endif %}

        {% for comment in post.comment_set.all %}
        <blockquote class="blockquote">
        <img style="float:left; clear: left;" class="rounded-circle article-img" height="10" width="10" src="{{ comment.user.profile.profile_pic.url }}"><a href="{% url 'posts:userprofile' comment.user.username %}" style="text-decoration: none; color: black;"><h6>{{ comment.user.first_name|capfirst }} {{ comment.user.last_name|capfirst }}</h6></a><br>
        <p style="font-size: 8px;">{{ comment.timestamp }}</p>
        <p style="font-size: 14px;" class="mb-3">{{ comment.content }}</p>
        <a  type="button" name="button" class="reply-btn ml-4"><i class="fas fa-reply fa-sm"></i></a>&emsp;

        {% if request.user == comment.user %}
        <a href="{% url 'posts:delete_comment' comment.id %}"><i class="fas fa-trash fa-sm" style="color: brown;"></i></a></td>
        {% endif %}
        </blockquote>
            {{ comment.reply.count }}
        <div class="replied-comments col-md-5" style="display: none;"> 

            {% for reply in comment.replies.all %}
                <blockquote class="blockquote">
                    <img style="float:left; clear: left;" class="rounded-circle article-img" height="50" width="50" src="{{ reply.user.profile.profile_pic.url }}"><a href="" style="text-decoration: none; color: black;"><h6>{{ reply.user.first_name|capfirst }} {{ reply.user.last_name|capfirst }}</h6></a><br>
                    <p style="font-size: 13px;" class="mb-3">{{ reply.content }}</p>
                </blockquote>
            {% endfor %}
            <div class="form-group row">
                    <form class="reply-form" method="post" action="{% url 'posts:comment_section' post.slug %}">{% csrf_token %}
                        <input type="hidden" name="comment_id" value="{{ comment.id }}">
                        <div class="form-group">
                            <textarea name="content" cols="60" rows="2" maxlength="1000" required="" id="id_content"></textarea>
                        </div>
                        <input type="submit" value="submit" class="btn-sm btn-outline-light" style="color: black;">
                    </form>
            </div>
        </div>
        {% endfor %}
</div> 

I guess there is some problem with the form submission, but I can't figure out what it is. Thanks

Answer 1

This is how I easily solve the problem and it helps me in many ways.

comments = Comment.objects.filter(post=post, reply=None).order_by('-id')

{% for comment in comments %}

{% if comment.reply %}

The IF statement will check if the comment is a reply, this have a parent If it is, you can access it with {{comment.reply.content}} and {{comment.reply.timestamp}} to print the parent. And {{comment.content}} to print the reply.

{% else %}

I.e. if the comment is just a comment and not a reply. Just print the comment {{comment.content}}

{% endfor %}

Answer 2

It is because replies are also comments. You are loading comments in views correctly by :

comments = Comment.objects.filter(post=post, reply=None).order_by('-id')

but in the template you are loading both comments and replies in :

{% for comment in post.comment_set.all %}

try :

{% for comment in comments %}

to load post comments and select replies of each comment by :

{% for reply in comment.replies.all %}