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.

I'm so sorry for you, Luca. But why don't you vent your personal frustrations somewhere more appropriate? (Now, I'm going to Meta to ask for a way to downvote comments.) — Christoffer Lette, Jun 11 '10 at 11:25

score 1 · Answer 1 · answered Jun 14 '10 at 14:44

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();

score 1 · Answer 2 · answered Mar 21 '12 at 16:50

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');

Hi @Charles_at_Hactus I'm having a similar issue where infinite scroll is not applying to an ajax loaded content. Do you know if these snippets would still work? I tried but they are not. If you could take a look at my issue http://stackoverflow.com/questions/21564561/infinite-scroll-on-to-ajax-loaded-content Thanks! — Jaypee, Feb 04 '14 at 22:29

score 0 · Answer 3 · edited May 23 '17 at 12:31

0

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

jquery infinite scroll "reset"

edited May 23 '17 at 12:31

Community

1
1

answered Aug 21 '13 at 15:58

Escuriola

53
5

score 0 · Answer 4 · answered Jan 10 '15 at 12:50

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

Using Infinite Scroll jQuery Plugin with ajax

4 Answers4