JQuery / Ajax - how to call method within infinite-ajax-scroll.js class

3
votes

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"/>'
    >                 });
2
jqueryajaxinfinite-scroll
What does this have to do with PHP? – Daniel W.
I am doing server side paging and filtering with PHP – LeeTee
There is nothing concerning PHP in the question. Well I have bash scripts too on my server but I don't put in the tag in every JavaScript question.. – Daniel W.
not even clear what you are asking...what does click event have to do witth scroll? – charlietfl
Ive removed the reference to PHP - sorry! – LeeTee

2 Answers

1
votes

There is already an Ajax call in the loadItems(url, onCompleteHandler, delay) method.

Try like this:

$('.filter a').click(function(e) {
                     //add selected filter to paginate URL
                     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);

        //ajax call to load results with filter applied
        //HOW TO DO THIS??
        jQuery.ias.loadItems('/yourScript.php?page=1', function(event) { }, 0)

        return false;
});
1
votes

I never figured out how to call the method within class and so wrote my own function outside of the class which is basically a repeat.

 function loadMoreItems(getQuery, loadtype) {
                    $.get(getQuery, null, function(data) {
                        container = $('#container', data).eq(0);
                        if (container) {
                            var newItemsHTML = "";
                            newItemsHTML = $( container ).html();
                            var $newItems = $(newItemsHTML);
                            if(loadtype == 'add'){
                                $container.isotope('insert', $newItems, true);
                            } else if(loadtype == 'replace'){
                                $container.isotope('remove'); 
                                $container.isotope('insert', $newItems, true);
                            }
                        }
                    }, 'html');
                }