Using jQuery Masonry with AJAX

Question

I'm using the jQuery plugin "Masonry" (http://masonry.desandro.com/) to sort some DIVs. These DIVs are loaded with AJAX and somehow, the plugin starts too early and get the positions wrong. How can I set a proper delay in these functions?

function loadALLtheposts(id) {
$.ajax({
    url: "******.php",
    data: {userID: id},
    type: "POST",
    dataType: "text",
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    success: function (data) {
        $('#timeline-posts').html(data);
        masonry_index();
    }
});
}

function masonry_index() {
$('#timeline-posts').masonry({
    itemSelector : '.post-wrapper',
    columnWidth : 266
});
}

Thank you in advance.

score 0 · Answer 1 · edited May 23 '17 at 12:12

You should use the standard DOM event - DOMSubtreeModified(deprecated)

$("#timeline-posts").bind("DOMSubtreeModified", function() {
    masonry_index(); //this is called only after the #timeline-posts changes.
    $(this).unbind('DOMSubtreeModified'); //if required do this
});

Use MutationObservers instead.

var target = $('#some-id');
var observer = new MutationObserver(function(mutations, observer) {
    //mutation occured
    masonry_index();
});
var config = { attributes: true, childList: true, characterData: true }; //there are others that you can choose. Follow the link above.
observer.observe(target, config);
//if you want to stop observing
observer.disconnect();

Please note that non of the above code is tested. :). Other SO links which might be helpful - link, link

Using jQuery Masonry with AJAX

1 Answers1