CODEWITHSUNDEEP
jqueryjquery-isotope
soundswaste
soundswaste

Reputation: 3074

Isotope not working with ajax loaded content

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.

Upvotes: 7

Views: 7830

Answers (2)

Rudr Thakur
Rudr Thakur

Reputation: 410

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.

initProducts()

initIsotope()

Upvotes: 0

soundswaste
soundswaste

Reputation: 3074

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

Upvotes: 14

Related Questions