Question posted in
You can find the official documentation here.

Ajax stuff are not running with Django Infinite Scroll – Jquery ajax

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);
      }
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 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');
}    
});
    Login or Signup to reply.
  3. 0 
    <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## }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search