jQuery Masonry and Ajax Append Items?
It appears that the masonry function expects a jQuery object as its second parameter and not a raw HTML string. You should be able to fix this by wrapping the success callback parameter like so:
jQuery.ajax({ type: "POST", url: ajax_url, data: ajax_data, cache: false, success: function (html) { if (html.length > 0) { var el = jQuery(html); jQuery("#content").append(el).masonry( 'appended', el, true ); } });});
var mediaItemContainer = $( '#container' );mediaItemContainer.masonry( { columnWidth: '210px', itemSelector: '.item'} );$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );$( mediaItemContainer ).masonry( 'reloadItems' );$( mediaItemContainer ).masonry( 'layout' );
Had a similar problem and instead used the following line (converted for your code). Sorry, I don't recall where I found it.
In your code replace this:
jQuery("#content").append(el).masonry( 'appended', el, true );With this:
jQuery("#content").append(el).masonry( 'reload' );