JS is not loading on the first load

Question

I'm the gem gon to get Rails variable in my JS. I have in my home page different activity that contains posts, and when I click on a "activity" div, I'm redirect to a page where all posts are displayed, and thanks to the plugin isotope the posts are filtered by the corresponding activity clicked, and then user can choose to click on other filter if they want to.

I pass the value of the activity when the user click with this :

<%= link_to 'Voir les idées', pages_enplace_path(:activite => activite.id)%>

I use gon gem in the controller where I filter my posts :

def enplace
  @activity = params[:activite]
  gon.activity = @activity
end

Then in my JS

var $grid = $('.grid').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
    filter: '.category-'+gon.activity

});

The problem is that the JS of the gem do not load on the first loading, I need to refresh the page to see my posts filtered. Do you have any idea ?

Here is the JS when I refresh the page

<script type="text/javascript">
  //<![CDATA[
   window.gon={};gon.activity="3";
 //]]>
</script>

This post might help: http://stackoverflow.com/a/17924845/3046413 — Carl Edwards, Jul 01 '15 at 14:18
Yes I thought that could be this but I checked and it's not ... but maybe I have a problem between turbolink and my gem. Should I place turbolink in a precise order ? — Simon M., Jul 01 '15 at 14:22
Where are you loading JS in your application layout? I found it is better to load at the bottom of the page to ensure that all elements I want to bind events to are available. — steve klein, Jul 01 '15 at 14:31
Inside your `application.js` file is `//= require jquery.turbolinks` above `//= require turbolinks`? — Carl Edwards, Jul 01 '15 at 14:32
@steveklein. You're right steve, it's working when I put `<%= include_gon %>` at the bottom, thank you ! :) — Simon M., Jul 01 '15 at 14:36

score 0 · Accepted Answer · answered Jul 01 '15 at 14:38

0

Make sure that you are loading Javascript at the bottom of your application layout, after all page elements are loaded. This ensures that all page elements are available when binding to events in your Javascript.

answered Jul 01 '15 at 14:38

steve klein

2,566
1
14
27

JS is not loading on the first load

1 Answers1