Reset infinite scroll with ajax content
I am using ajax infinite scrolling with comment system. It works fine until the user adds a new comment - this breaks the infinite scrolling, the "load more items" link still exists, but nothing happens when you click on it.
I saw this question: Reset / Disable infinite scrolling after AJAX call
I tried to implement destroy and bind method in my success method but loadmoreitems link is not responding. How can I reset the infinite scrolling after the user has posted 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>
source to share
When initializing the scroll on load make sure you store it in the ias variable. Something like that
var ias = jQuery.ias({
container: "#posts",
item: ".post",
pagination: "#pagination",
next: ".next a"
});
And in the success method, only call the methods ias.destroy();
and ias.bind();
as you did earlier.
Remove the initialization being done again in your ie code
jQuery.ias({
container: "#posts",
item: ".post",
pagination: "#pagination",
next: ".next a"
});
source to share