Reloading a new set of images makes div height 0 in isotope

Question

My javascript looks like the following:

    <script type="text/javascript">
        $(document).ready(function() {
            // isotope
            var $container = $('#content');
            $container.imagesLoaded( function(){
                $container.isotope({
                    filter: '*',
                    itemSelector : '.element',
                    getSortData : {
                        colors : function( $elem ) {
                            return $elem.find('.colors').text();
                        },
                        number : function( $elem ) {
                            return $elem.find('.number');
                        }
                    }
                });

                var $sortedItems = $container.data('isotope').$filteredAtoms;

                // filter items when filter link is clicked
                $('#filter a').click(function(){
                    alert("filter");
                    var selector = $(this).attr('data-filter');
                    $container.isotope({ filter: selector });
                    return false;
                });

                // sorting
                $('#sort a').click(function(){
                    var sortType = $(this).attr('data-sort');
                    $container.isotope({ sortBy : sortType });
                    return false;
                });
            });
        });

        function updateContent(path, args) {
            $.ajax({
                url: (path+args),
                type: "POST",
                success: function( data ){

                    $(allCards).remove();
                    $("#content").html( data );
                    $('#content').isotope( 'reLayout', callback );
                }
            });
        }

        function callback() {
            alert("success: "+$('#content').height());
        }
    </script>

Whenever I use the updateContent() function the height of the #content div becomes 0. I think there could be a race condition happening due to the content not having been fully loaded and isotope initializing before the next set of images have been loaded.

It works fine when I first load the document. However when I load a new set of images with updateContent() it sets the #content div height to 0. Ideally I'd like to be able to load a new set of images and isotope would initialize as it normally does and height should be an appropriate value for all of the images to fit inside the #content div.

The following part needs to be fixed and this is what I have so far...

$(allCards).remove(); // remove all previous images
$("#content").html( data ); // load new images
$('#content').isotope( 'reLayout', callback ); // <- reinit isotope to manage the new images

Basically I'd like it to remove all previous images and load all the new images in data and isotope would work with the new images.

Check http://stackoverflow.com/a/7913619/1369055 – Maksida Oct 20 '13 at 03:11 — Maksida, Oct 20 '13 at 03:11

score 3 · Accepted Answer · answered Oct 23 '13 at 02:22

I solved the issue by prepending. I'm putting this up so people don't have to suffer like I did.

$("#content").isotope( 'remove', $(".element"), function(){
    $("#content").prepend($(data)).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
});

score 0 · Answer 2 · answered Oct 21 '13 at 04:34

Have a look at http://isotope.metafizzy.co/docs/methods.html

Firstly make sure the markup your appending to $("#content") has the .element class. If they don't have it, you'll need to append it to them before attempting to insert them into the isotope container.

Secondly try using the inbuilt method for removing appending objects

.isotope( 'addItems', $items, callback )

In your case it would be:

$("#content").isotope( 'remove', $(".element"), function(){
    $("#content").isotope( 'addItems', $(data), function(){
        $("#content").isotope( 'reLayout' callback );
    });
});

You probably do not need to utilize the callbacks from 'remove' and 'addItems', but without a jsfiddle example it's hard to tell.

The code you provided does remove all elements but it doesn't seem to add the elements back. Your code is easy to understand and look very clean but I'm not sure why it's not working. — Howard, Oct 23 '13 at 01:24

Reloading a new set of images makes div height 0 in isotope

2 Answers2