I am using infinite-ajax-scroll (https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js) on my PHP project and have the scrolling working well with jquery filtering. However, when a filter is applied, I can end up with only a few items on the page and I would like to load more items without having to activate the scroll.
When a filter is selected, I calculate how many items are displayed within the container and if there are less than 50 after filtering, I want to load more items. I would like to call infinite-ajax-scroll to do this as this already has a method to load items into the container.
Im not an advanced coder when it comes to JQuery and cannot figure out how jquery-ias.js works and loads more items and cannot work out how to utilise this class to get more results after a filter has been applied
I would be grateful for any advice.
my jquery:
> $('.filter a').click(function(e) {
//filtering code goes here
> //add selected filter to paginate URL to pass to next page of infinite scroll
> var filter = $(e.target).text();
> var paginate_url = $( '.paginate a ').attr('href');
> var next_url = UpdateQueryString(paginate_url, group, encodeURIComponent(filter));
>
> $(".paginate a").attr("href", next_url);
instance.$allAtoms.removeClass('is-filtered');
instance.$filteredAtoms.addClass('is-filtered');
var itemsno = (instance.$filteredAtoms).length;
if (itemsno < displayItemsNo) {
> //ajax call to load more items with filter applied
>
> //HOW TO DO THIS??
>
>// $.ias.loadItems(next_url); ??
>
}
>
> return false;
> });
> // Infinite Ajax Scroll configuration
> jQuery.ias({
> container : '#main', // 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"/>'
> });