jQuery Isotope - can't get isotope work with ajax

Question

I have a page rendered with jQuery isotope plugin in this way:

var $container = $('.mydiv'),

        colWidth = function () {
            var w = $container.width(), 
                columnNum = 1,
                columnWidth = 0;
            if (w > 800) {
                columnNum  = 3;
            } else if (w > 600) {
                columnNum  = 2;
            } else if (w > 350) {
                columnNum  = 2;
            } else if (w > 250) {
                columnNum  = 1;
            }
            columnWidth = Math.floor(w/columnNum);
            $container.find('.element-item').each(function() {
                var $item = $(this),
                    multiplier_w = $item.attr('class').match(/item-w(\d)/)


                $item.css({

                    'margin-bottom': '30px'

                });
            });
            return columnWidth;
        },
        isotope = function () {
            $container.isotope({
                    animationEngine : 'jquery',
                resizable: false,
                transformsEnabled: false,
                transitionDuration: animationspeed,
                itemSelector: '.element-item',
                masonry: {
                    columnWidth: colWidth(),
                    gutterWidth: 5
                },
                    getSortData: {
      name: '.name',
      cashable: '.cash',
      number: '.number parseFloat',
      wr: '.wr parseFloat',
      bonus: '.bonus parseFloat',
      category: '[data-category]',
      country: '[data-country]',
      filter: '[data-filter]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }

    }


            }).css({'text-align':'center'});


        };


    isotope();
    $(window).resize(isotope);

Now, I would like to filter the container "mydiv" using an ajax call on a select group:

<select class="form-control input-sm" id="filters-select" data-filter-group="group-three"><option value="">All</option><option value=".option-one">Option One</option><option value=".option-two">Option Two</option><option value=".option-three">Option Three</option></select>

I'm calling ajax in this way:

$('#filters-select').change(function(){

            var getQuery = 'http://www.example.com/my-list/search-results/?cat8';
            getQuery += '&opt='+this.value.split('.').join("");


            $.ajax({
                url: getQuery,
                success: function(newElementsAjax){$container.isotope('insert', newElementsAjax); isotope();}
                });
            });

Ajax get success but the container is not updated, filtered, sorted...

Where is my fault, please?

Thanks to all!

Possible duplicate here: http://stackoverflow.com/questions/10965872/cant-get-isotope-to-work-with-ajax-code-samples — Vlad Cazacu, Aug 05 '14 at 14:15
You are doing it wrong with columnWidth first of all, you should use isotope v2 which also doesn't use anymore animationEngine since it only uses CSS3, and use check grid-sizer http://isotope.metafizzy.co/options.html#element-sizing — rob.m, Jan 16 '15 at 11:08

score 0 · Answer 1 · answered Aug 05 '14 at 14:16

0

You're using $container.isotope('insert', newElementsAjax); which is to insert new items.

If you're wanting to filter the current result set, you don't need to do an ajax call.

Simply call:

$container.isotope({ filter: '.yourFilterClassName' })

And Isotope will automatically remove and filter the result set (no ajax required).

In your case, you can try:

$('#filters-select').change(function(){
    var value = $(this).val();

    $container.isotope({ filter: value })
});

answered Aug 05 '14 at 14:16

Axel

10,732
2
30
43

Thank you for your reply. Yes, I know. But in this case I need to retrieve data from another page: http://www.example.com/my-list/search-results/?cat8&opt=option-one – DavidF Aug 05 '14 at 14:21

score 0 · Answer 2 · answered May 10 '17 at 06:03

0

Try this

put this after your ajax success function

$container.isotope('reloadItems');                      
setTimeout(function () { $container.isotope('layout') }, 500);

Hope that help.

answered May 10 '17 at 06:03

Tim

63
1
1
9

jQuery Isotope - can't get isotope work with ajax

2 Answers2