Reset / disable infinite scroll after AJAX call

4
votes

I am using infinite-ajax-scroll (https://github.com/webcreate/infinite-ajax-scroll) plugin with filtering. I have the filters working with the infinite scroll but my issue is, whenever the scroll get the the end of the results for one filter it will no longer scroll, even after another filter is selected. I therefore need to reset the infinate scroll when the filter is selected but I cannot find anywhere in the documentation on how to reset this and am not great with JQuery and so cannot figure this out.

I also have certain filters that don't need inifiniate scroll and would also need a a way to disable it for those.

$('.filter a').click(function() {
    //reset scroll somehow
    //setTimeout("jQuery.ias({container: '#container'})",1000);
    var $this = $(this);
    var URL = $this.attr('href');
    loadMoreItems(URL, $this);
});
return false;
});

jQuery.ias({
    container: '#container', // main container where data goes to append
    item: '.element', // single items
    pagination: '.paginate', // page navigation
    next: '.paginate a', // next page selector
    loader: '<img src="public/img/ajax-loader.gif"/>', 
    noneleft: 'No more discounts for your selection', 
    triggerPageThreshold: '10', 
    trigger: "Load more items",
    history: false, 
    thresholdMargin: -350
});
3
jqueryajaxinfinite-scrolljquery-ias
Have a jsFiddle we could look at? Have you tried simply re-placing the full infinite scroll initialization in the location you want it to reload at? – Zach Saucier
This related Q&A may be helpful as it's related: stackoverflow.com/questions/25898171/… – Lee Byron

3 Answers

5
votes

Others have had the same issue as you; according to the author, it's currently not possible to cleanly re-initialize IAS.

So your options seem to be

1) hard-reset the plugin by removing the event handlers and calling jQuery.ias({...}) again every time the filter has changed

2) switch to a different library. The user in that bug report wrote his own - maybe his solution is of use to you

3
votes

Like janfoeh said, there is nothing to re-initialize the plugin properly. You should unbind the scroll from window and call the init on the element again.

I recommand you to wrap your initialisation into a function to make the re-init easy.

$('.filter a').click(function() {
    $(window).unbind('scroll');
    initscroll();
});

function initscroll(){
    jQuery.ias({
        container: '#container', // main container where data goes to append
        item: '.element', // single items
        pagination: '.paginate', // page navigation
        next: '.paginate a', // next page selector
        loader: '<img src="public/img/ajax-loader.gif"/>', 
        noneleft: 'No more discounts for your selection', 
        triggerPageThreshold: '10', 
        trigger: "Load more items",
        history: false, 
       thresholdMargin: -350
    });
}
initscroll();

So you will have to call initscroll on load and when filter.

2
votes

Starting from version 2 of Infinite Ajax Scroll there's a new method designed to handle this kind of issues. Calling the new method destroy() an alias for unbind() you'll unbind IAS from any window or document events. Afterwards you can rebind IAS object.

$('.filter a').click(function() {
    setTimeout(function() { 
      ias.destroy(); 
    }, 1000);

    var $this = $(this);
    var URL = $this.attr('href');
    loadMoreItems(URL, $this);

    ias.bind();
});

Something alike, didn't test. You can check this method at http://infiniteajaxscroll.com/docs/methods.html