jQuery Masonry and Ajax Append Items?
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
columnWidth: '210px',
itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
Solution
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 );
}
});
});
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' );
http://masonry.desandro.com/methods.html