Using Infinite Scroll jQuery Plugin with ajax

Question

I'm doing a project similar to Google Reader.

I'm using Infinite Scroll jQuery Plugin which works exactly as advertised when viewing the contents of the default selected category (in a scrollable div).

However when selecting another category (or folder in the case of Google Reader) and the contents of that category is loaded with ajax into the same div container as above (basically exactly like Google Reader) and scrolling down to page 2 the problems arise as it will move to whatever page was previously selected +1 instead of starting from the beginning when a new category is selected.

I think basically I need a way to reset the plugin when a new category is selected. Any help greatly appreciated.

Answer 1

I realize it was a very general question. I was hoping to find someone who had done something similar.

Anyway, this is probably not optimal but I solved it like this.

I added this function to the plugin that can be called from out side the plugin:

this.resetPlugin = function() {
  $(document).unbind('retrieve.infscr',kickOffAjax);
  props.currPage = 1;
};

I load the plugin like this

window.infinitescroll = $('#content').infinitescroll({usual settings});

Than I can reset it when another category is selected:

window.infinitescroll.resetPlugin();

Answer 2

Your answer did not work for me. Here's what I did:

You have to set two variables for the re-instantiaion of InfiniteScroll to work. You also have to Rebind it. Here is the code:

$('#myContainer').infinitescroll('destroy'); // Destroy

// Undestroy
$('#myContainer').infinitescroll({                      
    state: {                                              
        isDestroyed: false,
        isDone: false                           
}
});

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need

// Re-initialize
$('#myContainer').infinitescroll('bind');

Answer 3

Only this works for me, may be this solutions are outdated:

jquery infinite scroll "reset"

Answer 4

Just want to contribute with my answer if someone faces a similar problem.

var off = 0;
var infinite = {};


function loadMorePosts(cat, offset){
            //FUNKY AJAX LOAD
}


function initInfinite(){
    infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function() {
        console.log(off);
        var cat = $('.f-categories').val();
        loadMorePosts(cat, off);
        off += 5;
      },
      onAfterPageLoad: function(){
        //console.log($.noop);
      }
    });
}
initInfinite();

$(function() {
    $('.f-categories').change(function(){
        var cat = $(this).val();
        off = 0;
        infinite.destroy();
        $('.grid').html('');
        initInfinite();
        loadMorePosts(cat,off);
    });
});