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

【问题标题】：JQuery / Ajax - how to call method within infinite-ajax-scroll.js classJQuery / Ajax - 如何在infinite-ajax-scroll.js 类中调用方法
【发布时间】：2013-12-01 20:05:53
【问题描述】：

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

【问题讨论】：

这和 PHP 有什么关系？
我正在使用 PHP 进行服务器端分页和过滤
问题中没有关于 PHP 的内容。好吧，我的服务器上也有 bash 脚本，但我没有在每个 JavaScript 问题中都添加标签..
甚至不清楚你在问什么......点击事件与滚动有什么关系？
我已经删除了对 PHP 的引用 - 抱歉！

标签： jquery ajax infinite-scroll

【解决方案1】：

我从来不知道如何在类内调用方法，所以在类外编写了我自己的函数，这基本上是重复。

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

【讨论】：

请更具描述性并提供您的代码。您当前的答案将来不会对其他人有所帮助。

【解决方案2】：

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

【讨论】：

我收到一个错误“TypeError: jQuery.ias.loadItems is not a function”