Update jquery.masonry when deleting item

Question

How to update Freemasonry when an item is deleted via Ajax? This is the code I use to remove an element:

if($deletes = $('a[rel=delete]')) { $deletes.click(function() { if(!window.confirm('Are you sure you wish to delete this picture?')) return false; $t = $(this); $.post( $t.attr('href'), {}, function(data) { if(data == "success") $t.parents('.deleteable:first').fadeOut(); } ); return false; }); } 

The reason I want to update is to remove the resulting spaces after deleting the elements.

Answer 1

Add a callback to your fadeOut() to actually call the .remove() your deleted item after it disappears, and then just call .masonry() in the container again.

Answer 2

I would say just call him again on the selector. It seems like a check to see if it was called again.

 ...snip... // checks if masonry has been called before on this object props.masoned = !!$wall.data('masonry'); ...snip... 

I will also recommend the saveOptions parameter as it seems to support it for repeated calls. This apparently does nothing by default (D'oh!)

Answer 3

The masonry call is again in the attenuation callback. Make it easy on yourself and do your masonry initialization in a function. Define your parameters there so that you do not have to transfer parameters to the callback area.

In this way

 $(function(){ var $bricks = $('your > elements'); function BuildWall(){ $bricks.masonry({your:'options'}); } BuildWall(); //Your code modified if($deletes = $('a[rel=delete]')) { $deletes.click(function() { if(!window.confirm('Are you sure you wish to delete this picture?')) return false; var $t = $(this); $.post( $t.attr('href'), {}, function(data) { if(data == "success") $t.parents('.deleteable:first').fadeOut(function(){ //This is faster than $(this).remove(); $(this).empty().remove(); //Reset Masonry BuildWall(); }); } ); return false; }); } }); 

Answer 4

jquery masonry itself has a delete method ( http://masonry.desandro.com/methods.html#remove )

you can put this in your fadeOut callback:

 $("your-container").masonry( 'remove', $(this) ).masonry();