Search code examples
javascriptinfinite-scrollmixitup

Infinite scroll :: mixitup:: json and ajax control


For infinite scroll I am generating url based on filters from mixitup plugin with database API set.

Initialized Infinite scroll

function InitializeInfiniteScroll() {
var $infinite = jQuery('.mixitup').infiniteScroll({
    path: function() {
        return global.url +
            "&param1="+ global.param1 +
            "&param2="+global.param2 +
            "&param3=" + global.param3
    },
    // load page as text
    responseType: 'json',
    // disable history
    history: false,
    status: '.page-load-status',
    checkLastPage: false
});

$infinite.on( 'load.infiniteScroll', function( event, response ) {
    if(response.length > 0) {
        if(global.dataset === null) {
            global.dataset = response;
        } else {
            global.dataset = global.dataset.concat(response);
        }
        global.mixer.dataset(global.dataset);
        global.last_id = response[response.length-1].id;
    } else {
        global.lastp = 1;
        jQuery('.mixitup-container').infiniteScroll('lastPageReached');
    }
});
}

In mixiut up control I am calling it with :

//global params1 params2 params3 set
if(global.lastp === 1) {
  jQuery('.mixitup').infiniteScroll('destroy');
  InitializeInfiniteScroll();
  lxdata.last_page = 0;
} else {
  jQuery('.mixitup').infiniteScroll('loadNextPage');
}

I have problem that I cannot call loadNextPage after lastPageReached beiing called. I don't know how to properly reset infinite scroll view for a proper another working with another data list.

In this way I am getting an error:

Uncaught TypeError: o._init is not a function

Solution

  • If anyone will fight with the same thing:

    infiniteScrollContainer.enableScrollWatch();
    infiniteScrollContainer.canLoad=true;
    infiniteScrollContainer.loadNextPage();
    

    Inside on load function:

    infiniteScrollContainer.hideStatusEventElements();