djangodjango-paginationdjango-comments

Django load more comments with AJAX


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.


Solution

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