Reapply Isotope Jquery

Question

I am adding the grid elements into the DOM using ajax call and want to reapply the isotope once the DOM is ready. Any clue anyone?

Sample Code:

$('#getNewData').on('click',function()){
    $.ajax({
         type: 'GET',
         url: myUrl,
         dataType: 'json',
         success: function(data){
             $('#gridContainer').empty();

             $.each(data, function(){
                 var gridContent = '<div class="grid-item filter1 filter2 filter3">'+
                                          '<h3 class="name">' + this.name + '</h3>' +
                                          '<div class="grid-item-content"> + this.vale + '</div>'+
                                    '</div>';
                 $('#gridContainer').append(gridContent);
             });
         }
        });

    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 160
        }
    });

    $grid.on('click', '.grid-item', function () {
        // change size of item by toggling gigante class
        $(this).toggleClass('grid-item--gigante');
        $grid.isotope('layout');
    });

});

Answer 1

According to the docs , you can use $grid.isotope('reloadItems') . I've had an issue where this resetted styling but only for new items, so every time items were added with ajax they were placed on top of old ones. A reload with $grid.isotope(); fixed this and nicely reapplied styling for all items.