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

Question

我正在我的PHP项目上使用无限滚动插件infinite-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"/>'
    >                 });

- LeeTee

---

这与PHP有什么关系？ - Daniel W.

我正在使用PHP进行服务器端分页和过滤。 - LeeTee

问题中没有涉及到 PHP。嗯，我在我的服务器上也有 Bash 脚本，但我不会在每个 JavaScript 问题中都加上标签。 - Daniel W.

不太清楚你的问题是什么...点击事件和滚动有什么关系？ - charlietfl

我已经删除了对 PHP 的引用 - 抱歉！ - LeeTee

我想在点击事件中加载数据。就像无限滚动加载数据一样。希望这样说得清楚。 - LeeTee

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

- Daniel W.

---

我收到一个错误信息：“TypeError: jQuery.ias.loadItems不是一个函数”。 - LeeTee

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

- LeeTee

---

请更加具体地描述您的代码，同时提供代码示例。您当前的回答无益于他人。 - Dom