reset infinite scroll with ajax content

Question

I am using the ajax infinite scroll with a comment system. It works fine until a user posts a new comment - this breaks the infinite scroll, the 'load more items' link is still there but nothing happens when you click it.

I have seen this question: Reset / disable infinite scroll after AJAX call

I have tried to implement the destroy and bind into my success method but the loadmoreitems link is unreponsive. How can I reset the infinite scroll after a user posts a comment with the code below?

ajax:

<script>
$(document).ready(function(){
$('#commentform').on('submit',function(e) {

$.ajax({
    url:'ajaxrequest.php',
    data:$(this).serialize(),
    type:'POST',
    dataType: 'HTML',
    success:function(data, response){

ias.destroy(); 

$("#posts").fadeOut(300);       
$('#posts').html(data)
$("#posts").fadeIn(500);
$('html, body').animate({ scrollTop: $('#posts').offset().top - 100 }, 'fast');

ias.bind(); 

 jQuery.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});
    },
    error:function(data){
        $("#error").show().fadeOut(5000);
    }
    });

e.preventDefault();
return false;

});
});
</script>

anpsmn anpsmn · Accepted Answer · 2014-11-25T12:07:27

When you initialize the scroll on load make sure you have stored it in a variable called ias. Something like this

var ias = jQuery.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});

And in success method call just the ias.destroy(); and ias.bind(); methods as you have done before.

Remove the initialization that is done again in your code i.e

jQuery.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});

reset infinite scroll with ajax content

1 Answers