Issues with isotope appending

Question

I am using isotope to build a smooth grid gallery. Currently I am having issues with the append feature: http://isotope.metafizzy.co/docs/methods.html#appended

If I call the append like this

$('#loadMore').click(function(){
    val='<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info">Lifestyle / People</h3><h2>Street Life</h2></div></div>';

    var $container = $('#grid-gallery');
    $container.isotope( 'appended', val)

    return false;
  }); 

Then isotopes spits out the following error msg:

[content] has no method 'filter'

If I add positioning to the div, then it works fine, except the new element is loaded to that position and remains fixed.

Agata

Did you ever figure out what was causing this? I have a similar problem where anything I try to insert or append returns the "has no method filter" error. – Ataliah

Answer 1

Change:

$container.isotope( 'appended', val);

To

$container.isotope( 'append', $(val) );

Or you could do this if you want it cleaner....

$('#loadMore').click(function(){

    val= $('<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info">Lifestyle / People</h3><h2>Street Life</h2></div></div>');

    var $container = $('#grid-gallery');
    $container.isotope( 'insert', val );

    return false;
}); 

Xyloid