4

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
});
Fieg
  • 3,046
  • 1
  • 16
  • 22
LeeTee
  • 6,401
  • 16
  • 79
  • 139
  • 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 Dec 07 '13 at 16:08
  • This related Q&A may be helpful as it's related: https://stackoverflow.com/questions/25898171/restarting-infinite-ajax-scroll-after-jquery-load/25899328#25899328 – Lee Byron Sep 17 '14 at 20:04

3 Answers3

5

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

janfoeh
  • 10,243
  • 2
  • 31
  • 56
  • 1
    Ok, I decided to go with option 2 after trying everything else. Couldn't get this one you suggested to work with my code. Im now trying to implement another popular plugin which I should be able to re-initialise. – LeeTee Dec 12 '13 at 11:44
  • @LeeTee thank you for the feedback! What plugin did you choose instead? – janfoeh Dec 12 '13 at 11:50
  • Ive gone for https://github.com/paulirish/infinite-scroll . However, its broken everything. Im hoping these issues will get resolved with a bit of tweaking! – LeeTee Dec 12 '13 at 12:21
  • Hi, I'm the author of IAS and I released a new version (v2) which now supports this using the [bind](http://infiniteajaxscroll.com/docs/methods.html#bind) and [unbind](http://infiniteajaxscroll.com/docs/methods.html#unbind) methods. – Fieg Feb 11 '14 at 22:46
  • @fieg Thats great! Can you provide me example, how to use bind and unbind event to solve the issue author has having. I am having same issue, and can't figure out how to do this. – Jatin Gadhiya Aug 08 '14 at 13:22
3

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.

Preview
  • 35,317
  • 10
  • 92
  • 112
2

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

Eugen Zaharia
  • 179
  • 8
  • Hi @Eugen Zaharia, I tried your solution on my code but doesn't work. Could you check my question? http://stackoverflow.com/questions/24419462/resetting-infinite-scroll-for-show-new-results-retrieved-via-ajax – Fred K Jun 26 '14 at 08:03
  • This won't work if the `loadMoreItems` function takes shorter than 1000 msecs, because then `destroy` would be called **after** the `bind` – mhu Jun 26 '14 at 10:58