Masonry after escape_javascript

Question

I am using Masonry with a Rails application to render a screen full of images. My problem is at some point I make a call using a remote AJAX form, which later refreshes the div. After that point, calling Masonry just stops working, calling it acts as if Masonry wasn't defined.

The code for rendering is rather plain-vanilla, with the div Masonry should work on:

<div id="pins">
  <%= render @pins %>
</div>

the partial I am rendering is just showing the Rails model, which looks like:

<div id="pin-<%= pin.id %>" class="box">...</div>

The code that loads Masonry on the first page load:

jQuery ->
    $('#pins').imagesLoaded ->
        $('#pins').masonry itemSelector: ".box", isAnimated: true

Then, at the view Javascript, I re-render the div as follows:

$("#pins").html("<%= escape_javascript render @pins %>");

$('#pins').imagesLoaded(function() {
    alert("Hey");
    return $('#pins').masonry({
          itemSelector: ".box",
          isAnimated: true
    });
});

Upon the refresh, the alert "Hey" is displayed, meaning the event is fired and caught just fine. However, the Masonry is called and it seems it is re-appending the content but without ordering it. To test this, I also tried to manually trigger Masonry manually using a link and it also stopped working after escape_javascript was called. Of course, if I try to render the partial without escape_javascript nothing is being refreshed.

I need some way to either render the partial without escaping javascript or instructions on how to make Masonry operational after javascript was escaped. Note that is the same environment other JQuery components work fine when re-declared as above.

Thanks in Advance.

Answer 1

Try using "appended" method after adding elements

http://masonry.desandro.com/methods.html#appended

Answer 2

Just trigger reload elements like:

$(document).ajaxComplete -> $(element).masonry()

won't work if try to catch ajaxComplete on $(element)