Hi. I try to implement Infinite Scroll - Loading JSON + Masonry.
I want run it in document.ready, but also when a dropdown change.
So, based to this example I group all js in a function..
function masloadinf(){
var $grid = $('.grid').masonry({
ect ect ect.
}
In document.ready, all good, no problem,
But whet i change dropdown, I see items group just two times,
If I chege also, I see items group three times, four times and other...
I undestand that error is here...
$grid.on( 'load.infiniteScroll', function( event, response ) {
console.log( response )
// parse response into JSON data
var data = JSON.parse( response );
// compile data into HTML
var itemsHTML = data.map( getItemHTML ).join('');
// convert HTML string into elements
var $items = $( itemsHTML );
// append item elements
$items.imagesLoaded( function() {
$grid.infiniteScroll( 'appendItems', $items )
.masonry( 'appended', $items );
})
});
In fact, if I don't use function masloadinf but copy code,
in document.ready all code and in on.change, commented
this code, all is fine.
I now ask what is the best solution to disable this code in on.change event
without copy all code, so keeping the function.
Hi. I try to implement Infinite Scroll - Loading JSON + Masonry. I want run it in document.ready, but also when a dropdown change. So, based to this example I group all js in a function..
function masloadinf(){ var $grid = $('.grid').masonry({ ect ect ect. }
And use it in
$(document).ready(function(){ masloadinf(); });
and
$('#filtro_immagini').on("change",function(){ $('.grid').infiniteScroll('destroy'); $('.grid').masonry('destroy'); $('.infinite-scroll').remove(); masloadinf(); });
In document.ready, all good, no problem, But whet i change dropdown, I see items group just two times, If I chege also, I see items group three times, four times and other...
I undestand that error is here...
$grid.on( 'load.infiniteScroll', function( event, response ) { console.log( response ) // parse response into JSON data var data = JSON.parse( response ); // compile data into HTML var itemsHTML = data.map( getItemHTML ).join(''); // convert HTML string into elements var $items = $( itemsHTML ); // append item elements $items.imagesLoaded( function() { $grid.infiniteScroll( 'appendItems', $items ) .masonry( 'appended', $items ); }) });
In fact, if I don't use function masloadinf but copy code, in document.ready all code and in on.change, commented this code, all is fine.
I now ask what is the best solution to disable this code in on.change event without copy all code, so keeping the function.
Thank you.