Question

I have the below function in a javascript file in the asset pipeline folder, I have set this file in the requirements on the application.js file below all the other libraries in loading order. The file loads in the browser correctly.

For some reason it is not working, so currently i’m adding it to the erb file and it works correctly, but i would like to know how to use it in the asset pipeline.

Am i declaring it incorrectly or something?

 $(function(){

      var $container = $('#container');

      $container.isotope({
        itemSelector: '.element'
      });

    });

this is the view:

<div id="container" class="super-list width2 height2  clearfix">

    <% @feature.issues.each do |issue| %>
    <div class="element metalloid isotope-item   " data-symbol="Mg" data-category="alkaline-earth">
    <p class="number">  <%= issue.id %> </p>
  <h2 class="symbol"> <%= link_to issue.title, [@feature, issue] %> </h2>

  </div>
  <% end %>

</div>

Answer 1

Based on the comments then, what you need to do is instead of putting this code just inside a $(function() {}) block, you need to put it inside an event block for whatever is triggering the load. Looking at the pjax documentation, I think there’s a pretty clear cut answer.

https://github.com/defunkt/jquery-pjax

It states: “pjax will fire two events on the container you’ve asked it to load your reponse body into. pjax:start and pjax:end“.

So i think if you bind the div with the end event, and pass your function in, it should work. If not, you might want to post your view code.

Edit

I think you’re close. Based on the code you added, the on flag should be attached to where you have your pjax bound to an element. Given that the first line you posted was:

$('a.pjax').pjax() 

I’m thinking you can try the following:

$('a.pjax').pjax().on('pjax:end', function(){ 
  var $container = $('#container'); 
  $container.isotope({ itemSelector: '.element' }); 
});