Appending via AJAX and using jQuery

[drewbaker]

Big time fan of your work. I use it all the time.

I've been trying to get my head around the new Masonry. I'd like to stick to a jQuery way of appending new bricks to an existing Masonry instance.

I've followed the Docs as close as I can, and I'm getting a "TypeError: t[a] is not a function" error when trying to use the 'appended' method.

Here is a link to my reduced test case:
http://labs.funkhausdesign.com/examples/masonry/appended.html

But my guess is there is something wrong with this code:

// Start Masonry
jQuery('#container').masonry({
    columnWidth: 150,
    itemSelector: '.block',
    gutter: 20,
    isFitWidth: true
});

// Get some more blocks
jQuery('#more').click(function(){
    jQuery.get('http://labs.funkhausdesign.com/examples/masonry/blocks.html', function(data) {

        // Append new blocks
        jQuery('#container').append(data);

        // Have Masonry position new blocks
        jQuery('#container').masonry( 'appended', data );

    });                     
});

Once I have this solved, I will leave up my example page and go through Stackoverflow and answer a lot of these questions people are having:
http://stackoverflow.com/search?q=masonry+appended

[desandro]

Hi Drew! Thanks for the reduced test case! It helps a lot.

Given that example, the problem is that jQuery is able to append a string of HTML. Whereas, Masonry's appended method requires an array-like object of Elements.

Here's your example, simplified a little. Instead of AJAXing content, it just appends the string of HTML:
http://codepen.io/desandro/pen/KwhqL

  var moreBlocks = '<div class="block large">6</div><div class="block large">7</div><div class="block large">8</div>';
  // Get some more blocks
  $('#more').click(function(){
    // Append new blocks
    $container.append( moreBlocks );
    // Have Masonry position new blocks
    $container.masonry( 'appended', moreBlocks );
  });

The solution is to wrap up the string of HTML in a jQuery object and use that for appending. See http://codepen.io/desandro/pen/euGdB

  $('#more').click(function(){
    // make jQuery object from HTML string
    var $moreBlocks = $( moreBlocks );
    // Append new blocks
    $container.append( $moreBlocks );
    // Have Masonry position new blocks
    $container.masonry( 'appended', $moreBlocks );
  });

---

Seems like a lot of people are having trouble with appended on Stack Overflow, but I don't know if it's related to this problem.

[drewbaker]

Hey David,

Thanks for this!

But running you code in a .get() callback gives the "TypeError: t[a] is not a function" error, whereas running it as a var works fine.

This doesn't work:
http://labs.funkhausdesign.com/examples/masonry/appended.html

jQuery('#more').click(function(){
    jQuery.get('http://labs.funkhausdesign.com/examples/masonry/blocks.html', function( data ) {

        // make jQuery object from HTML string
        var $moreBlocks = jQuery( data );

        // Append new blocks
        $container.append( $moreBlocks );

        // Have Masonry position new blocks
        $container.masonry( 'appended', $moreBlocks );                      

    });                     
});

But if you switch out the get(data) with a var data = "html" (as per your code pen) it works fine.

So why is that? What's with the .get() data variable that Masonry doesn't like it?

[desandro]

Looks like jQuery is including text entities in the $moreBlocks object

The quick fix to is filter these out

var $moreBlocks = jQuery( data ).filter('div');

I'll update Masonry so that it doesn't get hung-up on this error. Thanks for reporting the bug!

[drewbaker]

Thanks!!!

[bswinnerton]

Just wanted to say thanks for this 👍

[jonesch]

Yes, thank you very much for explaining this!

[josemarluedke]

Hello, I just want to say that I had this problem on v3.1.2 and I solved using the .filter('div').

You should mention this in the documentation.

[desandro]

@josemarluedke Do you have a live URL I can take look at? I'm not able to reproduce the error given this example: http://codepen.io/desandro/pen/evLkD

[desandro]

closing as fixed.

[zaeem]

Thanks

[X9DESIGN]

Why this does not work now?
http://codepen.io/desandro/pen/evLkD

Loaded blocks do not match.