0

I am implementing infinite scroll in a custom collection which is working perfectly but in my case when i filter out this collection and update collection item with ajax response still the previously binded event is calling along with updated bind event

How can i stop the previous event after ajax response?

<div class="dynamic-pager-autoloader" id="testing" data-mage-init="{Test_Test/js/lazyload : {page_url:{2:http:\/\/127.0.0.1\/Test\/test\/account\/index\/?job_name=TEST&p=2,3:http:\/\/127.0.0.1\/Test\/test\/account\/index\/?job_name=TEST&p=3},current_page:1,last_page:3,list_wrapper:.quotes-history,padding:200,auto_trigger:true,trigger_element:.dynamic-pager-lazyload-trigger}}">
    <button class="dynamic-pager-lazyload-trigger dynamic-pager-hide-onload action primary" title="See more" type="button" style="display: inline-block;"> <span>See more</span> </button>
    <img class="posts-loader dynamic-pager-show-onload" src="http://127.0.0.1/Test/pub/static/version1591285806/frontend/Procraft/dealerportal/en_US/images/loader-2.gif" alt="Posts loader" style="display: none;">
</div>

Here is my lazyload.js code

define(['domReady!', 'jquery'], function(domReady, $) 
{
'use strict';

var Lazyload = function (options) 
{
    var that = this;

    /**
    * Lazyload default options.
    * @type {Object}
    */
    that.defaults = 
    {
        expires: null,
        path: '/',
        domain: null,
        secure: false,
        lifetime: null
    };

     /**
     * Init options
     * @type {Object}
     */
     that.opt = $.extend(that.default, options);
     console.log(that.opt);

     /**
     * Load new content
     */
     function startLoading()
     {
        if (that.opt.current_page < that.opt.last_page && !that.loading) 
        {
            that.loading = true;
            $('.dynamic-pager-show-onload').show();
            $('.dynamic-pager-hide-onload').hide();

            console.log(that.opt.page_url[that.opt.current_page+1]);

            $.ajax(
            {
                "url":that.opt.page_url[that.opt.current_page+1],
                "cache":true
            }).success(function (data) 
            {
                var $html = $(data);
                var ws = that.opt.list_wrapper;
                var $nw = $html.find(ws);
                if ($nw.length) 
                {
                    $(ws).append($nw.html());
                    that.opt.current_page++;
                }

                endLoading();

            }).fail(function (xhr, ajaxOptions, thrownError) 
            {
                console.log(thrownError);
                endLoading();
            });
        }
    }

    /**
     * On loading end
     */
     function endLoading()
     {
        that.loading = false;
        $('.dynamic-pager-show-onload').hide();
        if (that.opt.current_page < that.opt.last_page) 
        {
            $('.dynamic-pager-hide-onload').show();
        }
    }

    /* Is not loading now */
    endLoading();

    /* If auto trigger enabled */
    if (that.opt.auto_trigger) 
    {
        var $w = $(window);
        $w.scroll(function () 
        {
            if ($w.scrollTop() + $w.height() >= $(that.opt.trigger_element).offset().top - that.opt.padding) 
            {
                startLoading();
            }
        });
    }

    /* On trigger element click */
    if (that.opt.trigger_element) 
    {
        $(that.opt.trigger_element).click(function () 
        {
            startLoading();
        });
    }
};

return function (options) 
{
    new Lazyload(options)
};

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.