I use Freemasonry with the Rails app to display a screen full of images. My problem is at some point I am making a call using a remote AJAX form that updates the div later. After this moment, the challenge to Freemasonry simply ceases to work, calling it as if Freemasonry is undefined.
The code for rendering is pretty simple vanilla, and the freemasonry div should work on:
<div id="pins"> <%= render @pins %> </div>
Partial rendering shows a Rails model that looks like this:
<div id="pin-<%= pin.id %>" class="box">...</div>
Code that loads Freemasonry when loading the first page:
jQuery -> $('#pins').imagesLoaded -> $('#pins').masonry itemSelector: ".box", isAnimated: true
Then, in a Javascript view, I re-create the div as follows:
$("#pins").html("<%= escape_javascript render @pins %>"); $('#pins').imagesLoaded(function() { alert("Hey"); return $('#pins').masonry({ itemSelector: ".box", isAnimated: true }); });
When updating, the warning message "Hello" is displayed, which means that the event is triggered and caught just fine. However, Freemasonry is invoked and appears to re-add content, but does not order it. To test this, I also tried to manually start Freemasonry manually using the link, and also stopped working after calling escape_javascript. Of course, if I try to execute partial without escape_javascript, then nothing is updated.
I need to somehow edit the partial without avoiding javascript or instructions on how to make Freemasonry workable after javascript has been escaped. Note that this is the same environment as the other jQuery components that work fine when re-declared, as described above.
Thanks at Advance.