How to load more content in Django application?

Question

I have developed a template for viewing the group list in my Django application. What I came to know is that, after more groups, the page is scrolling down. I am unable to see all the names of the groups. Also, I want to view only 4 group names at the start and then after clicking the load more button, the next 4 groups show up. I am unable to do this.

    {% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
    <div class="content">
        {% if user.is_authenticated %}
        <h2>
            Welcome back
            <a href="{% url 'posts:for_user' username=user.username %}">@{{user.username }}</a>
        </h2>

    {% endif %}
            <h2>Groups</h2>

            <p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
    </div>
    {% if user.is_authenticated %}
    <a href="{% url 'groups:create' %}" class="btn btn-md btn-fill btn-warning"><span class="glyphicon glyphicon-plus-sign"></span> Create New Group!</a>
    {% endif %}
</div>
{% endblock %}

{% block group_content %}
<div class="col-md-8">
    <div class="list-group">
        {% for group in object_list %}
          <a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
                 <h3 class="title list-group-item-heading">{{ group.name }}</h3>
            <div class="list-group-item-text container-fluid">
                {{ group.description_html|safe }}
                <div class="row">
                    <div class="col-md-4">
                        <span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
                    </div>
                    <div class="col-md-4">
                        <span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
                    </div>
                </div>
            </div>
        </a>
        {% endfor %}

                    </div>

</div>
{% endblock %}

I want to add a scrolling option to this page. How to do that? Pagination could be a solution. But I want to load the list on the same page itself.

Answer 1

1. Parse the object_list into a JSON object: This should allow you to provide the client with all the groups that exist in order to achieve your goal to keep the user on the same page.

2. Use jQuery or Javascript to refresh your html container that has the groups listed: Based on the size and type of data, you can also write a new view that returns a filtered JSON object to a post method in Javascript.

Example: https://codepen.io/elmahdim/pen/sGkvH

    /*
     Load more content with jQuery - May 21, 2013
    (c) 2013 @ElmahdiMahmoud
    */   

$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});