Isotope not working with ajax loaded content

Question

I have a select-box that contains 4 options, selecting each of which will result in removing all the present .item divs and loading new .items and then realigning them using isotope.

$('.menu-select').change(function(){
    var selected=$('.menu-select-option:selected').html().toLowerCase();
        if(selected=='all')
            {
                loadContent('mixed_home_all.html');
            }
        if(selected=='recommended')
            {
                loadContent('mixed_home_reco.html');
            }
        if(selected=='popular')
            {
                loadContent('mixed_home_pop.html');
            }
});

The loadContent function looks like this :

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('remove', $item);
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope('reLayout');
            });
        });
    }

FOr some reason, reLayout is not working. The class isotope-item is not getting added to the individual items either. THere's no error in the console log.

Car

Answer 1

I resolved this by destroying previous isotope and triggering a fresh one for every value in the select-box. My loadContent function looks like this now :

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('destroy'); //destroying isotope
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope({ //triggering isotope
                    itemSelector: '.item'
                });
            });
        });
    }

Car

Hello I successfully adapted this code and works well but my sorting is not working after reloading elements ... Maybe you can helo me ... Thanks! – Antilebanon

Answer 2

If you are using Vue JS with Axios to load data into your isotope then the problem here is that the data is not available while constructing the DOM and that is why isotope is rendered without any data. After a little bit of trying I found a way around it.

1. Make sure jquery-isotope is loaded AFTER jquery otherwise it throws '$ is not defined'.
2. Make sure that the $('element').isotope({...}) is called only after the ajax call is successful.

In the screenshots below if you check custom.js that is being loaded after the ajax call is successful, contains the initIsotope method that calls $('element').isotope({...}). Only this time the data is available while rendering the isotope so it works fine!

I hope this answer helps you in anyway.

Brutify