Question

我在我的PHP项目中使用无限-ajax-scroll（https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js），并且滚动与jquery过滤一起运行良好。但是，当应用过滤器时，我最终只能在页面上显示几个项目，而我想加载更多项目而无需激活滚动。

当选择过滤器时，我会计算容器中显示的项目数，如果过滤后少于50项，我想加载更多项目。我想调用infinite-ajax-scroll来执行此操作，因为这已经有一个方法将项目加载到容器中。

对于JQuery而言，我不是一个高级编码器，无法弄清楚jquery-ias.js如何工作并加载更多项目，并且无法解决如何在应用过滤器后利用此类来获得更多结果

我很感激任何建议。

我的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"/>'
    >                 });

Answer 1

loadItems(url, onCompleteHandler, delay)方法中已经有一个Ajax调用。

试试这样：

$('.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;
});

Answer 2

我从来没有弄清楚如何在类中调用该方法，因此在类之外编写了我自己的函数，这基本上是重复的。

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

JQuery / Ajax - 如何在infinite-ajax-scroll.js类中调用方法

2 个答案: