isotope doesn't reLayout when items are appended

Question

I am trying to append new items to a container via ajax request on Rails (jsfiddle with explanation is provided below)

my js response I wrote is

var $newthumbs = "..new items..";
$('#homepage_thumbnails').append( $newthumbs );
$('#homepage_thumbnails').isotope( 'appended', $newthumbs );

I seem to have some sort of a problem once the new items are appended.. Once the items are appende, isotope doesn't seem to fire and I am left with items which were initially isotoped and the new items which are not isotoped.

this is an example of what I have (I got several isotoped items and then straight after several new unisotoped items)

<div id="homepage_thumbnails" class="thumbnails isotope" style="position: relative; overflow: hidden; height: 720px;">
<div class="thumbnail-item isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 480px, 0px);">
...
</div>
<div class="thumbnail-item thumbnail span2">
    ...
</div>
</div>

note that is happens with $('#homepage_thumbnails').isotope( 'insert', $newthumbs ); as well

What is going on here?

Update

It seems that isotope gets stuck somehow.. since if I put alert('test') after it, it won't get fired. If I put the alert beforethe isotope call, the alert gets fired... ahhh help

Update 2

I've made a jsfiddle that shows the problem. It is very simple, but I think the problem is simple as well - I'm just missing out on something important.

jsfiddle explanation and how it related to my original problem:

on the jsfiddle are 2 class - item and red-item. A simple layout of 3 items with transparent background (to show the problem better). Once clickme is clicked a new-item should join the group via append and then recombabulized with isotope. The result as seen is that the red-item is below the first item and doesn't get isotoped. Via inspect it can be seen that it is the same as my original problem which is that the original items get isotoped, yet the new appended items don't.

Hope I made it clear and that someone will be able to help me and prove me sane. Thank you.

Update 3

The solution (partial) is to engulf newthumbs with $() like so

var $newthumbs = $("..new items..");

however I still have a problem with this..

on this jsfiddle I've added the solution and make is so 2 div are added each time.

on this broken fiddle I've added the divs similiar to how render helper does on Rails, which added \n \t and so forth. This doesn't seem to work.

I am trying to figure out how to make it work..

Answer 1

I had the same problem as you and I used your fiddle to find a solution. I think the problem is that after you append the new items you need to give isotope a reference to those inserted items.

http://jsfiddle.net/cR7WP/

When you say:

element.append( '<div />' ).isotope( 'appended', $('<div />') )

Two separate div elements are created; one that is actually appended and one that is a fragment, that Isotope tries to layout. The appended div never gets passed to the layout function.

Answer 2

I know that thread is old, but here is my solution. It seems isotope just can not immediately render the container:

var item = $(e);
setTimeout(function() {
  CSP.grid.append(item).isotope('appended', item);
}, 50); // fixes an overlay bug