Django load more comments with AJAX

Question

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.

Does this answer your question? [How to load more content in django application?](https://stackoverflow.com/questions/47605073/how-to-load-more-content-in-django-application) — Linh Nguyen, Jan 20 '20 at 03:38

score 2 · Accepted Answer · answered Jan 20 '20 at 05:58

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/.

Django load more comments with AJAX

1 Answers1