Ajax stuff are not running with Django Infinite Scroll

Question

I have used this tutorial and implemented infinite scrolling in django and that loads the pages.

However my Ajax calls are working only in first page load and are not working in consequent lazy loads. I have followed this answer to using $items.each.... block of code.

But after using the above method, now the waypoint does not load the pages anymore and I am getting stuck on the first page itself(the Ajax call is working). Upon removing the code, the lazy loads is able to load consequent pages. I am using Bootstrap 4 with Django 3. Any suggestions?

I am adding the script that's blocking the lazy load.

<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
$(document).ready(function() {
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $items.each(function(){
            $(this).find('.like').on('click', likecommentevent);
        }
      }
    });
});
</script>

Edit: Alternate update, But this is not what I need

I tried following alternative to onAfterPageLoad above and the lazy load works. But now the Ajax call is being called twice or more.

onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $('.like').on('click', likecommentevent);
      }

Is your get post method are working in template after infinite scroll? Im having issues with it. whenever i put get post method in class based view with in finite scroll. infinite loading get stopped. any suggestions? — optimists, Oct 06 '20 at 01:34
@Rohan While using infinite scroll you need to use Ajax for get and post methods. — Jayesh, Oct 07 '20 at 15:52
@ROHAN Also use the $items to find the controls as shown in my answer. — Jayesh, Oct 07 '20 at 15:54
as its easy to implement, but also added new work.....ajax stufff — optimists, Oct 15 '20 at 09:21

score 1 · Answer 1 · answered Aug 05 '21 at 00:19

<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
$(document).ready(function() {
var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  onBeforePageLoad: function () {
    $('.loading').show();
  },
  onAfterPageLoad: function ($items) {
    $('.loading').hide();
    $items.find('.like').on('click', likecommentevent);
  }
});
});
</script>

To further expand on this likecommentevent is a value that has an function stored in it. (my jargon is far from professional) Where does likecommentevent come from and what does it store? It may look like this: this resembles an upvote/downvote system.

var likecommentevent = function(event){

var answerid=$(this).data('answer');
        // Ajax
        $.ajax({
            url:"/save-downvote",
            type:"post",
            data:{
                answerid:answerid,
                csrfmiddlewaretoken:"{{csrf_token}}"
            },
            dataType:'json',
            success:function(res){
                var _prevupvote=$(".downvote-count-"+answerid).text();
                if(res.bool==true){
                    $(".downvote-count-"+answerid).text(parseInt(_prevupvote)+1);
                }
            }
        });
 }

whatever function you have, store it this way and pass it in onAfterLoad:function($items){ ##here## }

GordonBreazz · Answer 2 · 2020-05-24T15:58:30.667

0

Your code needs to be called after loading page scripts and resources

$(document).ready(function() {
  $(".infinite-container").waypoint(function(direction) {
    // your code
    if (direction === 'down') {
        losdMore();
    }
  }   
  function loadMore() {
    console.log("Loading page " );


    $.waypoints('refresh');
}    
});

edited May 24 '20 at 15:58

answered May 24 '20 at 15:50

GordonBreazz

26
4

Did that. But nothing changed. – Jayesh May 24 '20 at 15:54
You are trying to use library hooks. Make it easier as I wrote – GordonBreazz May 24 '20 at 16:01
I tried it but didn't get that right. Can you please try my code above and represent it? – Jayesh May 24 '20 at 16:12

score -1 · Accepted Answer · answered May 25 '20 at 17:58

I have finally resolved the issue. The calling seems to be very specific upon $items for lazy load to work. PFB the working solution for your reference:

<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
$(document).ready(function() {
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $items.find('.like').on('click', likecommentevent);
      }
    });
});
</script>

Ajax stuff are not running with Django Infinite Scroll

3 Answers3