Comment pagination without reloading the page

[ChathuraGH]

Proposed Functionality

You can post, edit, flag, delete comments without refreshing page. But you can't go to paginated pages without refreshing.
How come you can post, but can't load next page with ajax or fetch.
My propose is to use ajax/fetch to load paginated pages.

Use Case

Types >

1. auto loadwith scroll with ajax/fetch > no click needed
2. keep current pagination links, but load with ajax/fetch > onclick on link

Changes

Only small js code need to be changed.
I can create a pull request if you want.

[ogurec-ogurec]

This is a very useful suggestion. We'll be looking forward to it. @ChathuraGH , please tell me, without PR, what changes do I need to make in order for the "Load more" button to appear? (I'm a beginner developer, I'll be grateful)

[ChathuraGH]

@ogurec-ogurec , What version do you use? django-comments-dab version.
because answer changes with version.

[ChathuraGH]

For django-comments-dab==1.6.7

@ogurec-ogurec , @Radi85 .

I have spend some time for the task now. Maybe there are lot of variations in this design. As

1. use ajax(jQuery)
2. use fetch
3. not query full page(medium code change)
4. use iframe
5. use auto load on scroll > no buttons, no clicks, infinity scroll
6. use more button to load onclick
7. use pagination buttons to replace content
8. query full page(small code changes)
   .
   So anything is possible. It is just a matter of work that you have to put in to.
   Every combination has its own pros and cons.
   So for now, I have used option 2,8,6.

@ogurec-ogurec , @Radi85

Steps

1)

1. Select one of your django apps
2. go to template folder
3. create folder 'comment'
4. go in to this folder
5. create folder 'comments'
6. go in to this folder
7. create 'pagination.html' file
8. put the below code in this file

<nav id="pagination-nav" aria-label="Page navigation" class="mt-3 mb-5">
    <ul class="pagination justify-content-center pagination-sm">

        {% if comments.has_next %}
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" onclick="event.preventDefault();Load_Commentsx(this);" href="?page={{ comments.next_page_number }}#comments" style="color:blue;font-weight:bold;font-size:large;" aria-label="Next">
                    Get More Comments
                </a>
            </li class="{{li_cls}}">
        {% endif %}
    </ul>
</nav>

2)

1. Put below code inside(anywhere) your template(where you render your comments) > best if put at the bottom of page

<script type="text/javascript">
function Load_Commentsx(e){
    var q_url=e.href;
    let response = fetch(q_url).then(function(response) {
        if (response.ok) {
            response.text().then(function(text) {
                document.querySelector('#pagination-nav').remove();
                document.querySelector('#Modal').remove();
                const template = document.createElement('template');
                template.innerHTML = text;
                var elem=document.querySelector('#comments div.js-main-comment');
                const lightBoxContent1 = template.content.querySelector('#comments div.js-main-comment');
                elem.innerHTML = elem.innerHTML + lightBoxContent1.innerHTML;
                var elem2=document.querySelector('#comments');
                const lightBoxContent2 = template.content.querySelector('#comments #Modal');
                elem2.appendChild(lightBoxContent2);
                const lightBoxContent3 = template.content.querySelector('#comments #pagination-nav');
                elem2.appendChild(lightBoxContent3);
            });
        }
    });
};
</script>

3)

Render your comments as usual.

Happy Coding.💓⭐⚡😀.

[ogurec-ogurec]

@ChathuraGH wow, big thanks, I struggled for almost a week to implement something like this. I ran off to test it, I'll come back with feedback.

[ChathuraGH]

I am excited to see your feedback 👀.

[ogurec-ogurec]

@ChathuraGH I tested it, added the code to the file site-packages\comment\templates\comment\comments\pagination.html, the button appeared, the button has the desired value of the next page in the link, but when clicked, nothing is loaded, and there is an error in the console:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'innerHTML')

here in this line:

apparently, there's something wrong with the selectors.

DAB version: v2.8.0 (last)

[ChathuraGH]

Somewhat expected behaviour, because I didn't know your version.
I will post working code for your version.

[ChathuraGH]

@ogurec-ogurec , @Radi85 .
I just tested for your(@ogurec-ogurec ) version(DAB version: v2.8.0 (last)).
It works.

JS CODE

<script type="text/javascript">
function Load_Commentsx(e){
    var q_url=e.href;
    let response = fetch(q_url).then(function(response) {
        if (response.ok) {
            response.text().then(function(text) {

// remove > #pagination-nav + #Modal
                document.querySelector('#pagination-nav').remove();
                document.querySelector('#Modal').remove();
// template
               var template = document.createElement('template');
                template.innerHTML = text;
// add new comments
                var old_comments=document.querySelector(''section#comments div.mt-5');
                const new_comments_section= template.content.querySelector('section#comments div.mt-5');
                old_comments.innerHTML = old_comments.innerHTML + new_comments_section.innerHTML;
///////
                var elem2=document.querySelector('#comments');
//2 add new #Modal
                var new_Modal = template.content.querySelector('#comments #Modal');
                elem2.appendChild(new_Modal );
//3 add new #pagination-nav
                var new_pagination_nav = template.content.querySelector('#comments #pagination-nav');
                elem2.appendChild(new_pagination_nav );
            });
        }
    });
};
</script>

TEMPLATE CODE

{% load i18n %}
<nav id="pagination-nav" aria-label={% trans "Page navigation" %} class="mt-3 mb-5">
	{% trans "Get More Comments" as Get_More_Comments %}
    <ul class="pagination justify-content-center pagination-sm">
        {% if comments.has_next %}
            <li class="{{li_cls}}">
                <a class="page-link {{text_style}}" onclick="event.preventDefault();Load_Commentsx(this);" href="?page={{ comments.next_page_number }}#comments" style="color:blue;font-weight:bold;font-size:large;" aria-label={{ Get_More_Comments }}>
                    {{ Get_More_Comments }}
                </a>
            </li class="{{li_cls}}">
        {% endif %}
    </ul>
</nav>

Happy Coding.💓⭐⚡😀.

[ChathuraGH]

What happened bro? Did you succeed?

[ogurec-ogurec]

@ChathuraGH thanks the code, i add code to the pagination.html, but there is an error when starting:

here in this line:

  <a class="page-link text-success" onclick="event.preventDefault();Load_Commentsx(this);" href="?page=2#comments" style="color:blue;font-weight:bold;font-size:large;" aria-label=Get More Comments>
                    Get More Comments
                </a>

what could it be?

[ChathuraGH]

I know what it is. Where did you put JS CODE?
This happens when js code is not present.

[ogurec-ogurec]

That's it, I found a mistake, there was one extra quote,

var old_comments=document.querySelector(''section#comments div.mt-5');

, now it works, but a new problem has appeared, after the comments are loaded from the second page, the button and pagination disappear, and the comments are no longer loaded. Roughly speaking, comments are loaded only from the second page, although there are many more comments

[ChathuraGH]

ok....
I see it now..

[ChathuraGH]

can you try removing spaces here..

        elem2.appendChild(new_Modal );<<<<<
        //3 add new #pagination-nav
        var new_pagination_nav = template.content.querySelector('#comments #pagination-nav');
        elem2.appendChild(new_pagination_nav );<<<<