Rails 4: coffeescript only works when there is a post request or when i reload the page

Question

i am mostly a backend developper and am not so skilled in javascript related stuff (and all the galaxy of frameworks that exists on the place). I know that's bad but it is what it is.

i'm becoming crazy about the issue I have and i'm probably missing something very basic. i made some researches (Google + the stack overflow bible) and didn't find any case similar to the issue I have. i suppose i just don't know what I'm doing. let me explain.

What's happening

I am using Rails 4 for a small (useless) project and I try to write some javascript "code" in the coffeescript files.

apparently, the coffeescript "code" i wrote only works when I reload a page, or after a POST request (when you submit a form for example). On GET requests, during navigation from page to page for example, nothing is happening.

I tried with a very simple basic elementary 101 test: displaying an alert message (Hello!) on a page (It started by including a date picker).

let's say i have an Article model and an associated ArticlesController to edit/create/delete data. I have the following files :

app/assets/javascripts/application.js
app/assets/javascripts/articles.js.coffeee
app/controllers/articles_controller.rb 
app/models/article.rb
app/views/articles/new.html.erb 
app/views/articles/index.html.erb 
etc.

I am just adding one line in app/assets/javascripts/articles.js.coffee :

alert "Hello!"

If I submit a form or I reload a page, I see the alert "Hello!". If I just click on a link, to edit an article for example, nothing is happening.

The logs

When I look at the rails logs in the two cases, I have two different scenarios:

In the "it's not working" case, when I do a simple get request (by clicking on the edit link), I have this in the logs :

Started GET "/articles/1/edit" for 127.0.0.1 at 2013-09-17 14:35:28 -0400
Processing by ArticlesController#edit as HTML
  Parameters: {"id"=>"1"}
  Author Load (0.3ms)  SELECT "authors".* FROM "authors" WHERE "authors"."remember_token" = 'ab6fa1c5257585de99459c60f24121c' LIMIT 1
  Article Load (0.2ms)  SELECT "articles".* FROM "articles" WHERE "articles"."author_id" = ? AND "articles"."id" = 1 ORDER BY published_at DESC LIMIT 1  [["author_id", 1]]
  Rendered shared/_error_messages.html.erb (0.1ms)
  Rendered articles/edit.html.erb within layouts/application (6.6ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (0.6ms)
  Rendered layouts/_footer.html.erb (0.1ms)
Completed 200 OK in 44ms (Views: 40.4ms | ActiveRecord: 0.4ms)

In the "it does work" case, when I reload the same edit page for example, it reloads everything..

Started GET "/articles/1/edit" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Processing by ArticlesController#edit as HTML
  Parameters: {"id"=>"1"}
  Author Load (0.3ms)  SELECT "authors".* FROM "authors" WHERE "authors"."remember_token" = 'ab6fa1c5257585de99459c60f24121c' LIMIT 1
  Article Load (0.1ms)  SELECT "articles".* FROM "articles" WHERE "articles"."author_id" = ? AND "articles"."id" = 1 ORDER BY published_at DESC LIMIT 1  [["author_id", 1]]
  Rendered shared/_error_messages.html.erb (0.1ms)
  Rendered articles/edit.html.erb within layouts/application (5.0ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (0.4ms)
  Rendered layouts/_footer.html.erb (0.1ms)
Completed 200 OK in 26ms (Views: 23.4ms | ActiveRecord: 0.4ms)


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/articles.css?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/articles.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2013-09-17 14:37:28 -0400
(i removed some of the lines to make it clearer)

What I tried

I tried to generate the js files with

rake assets:precompile

but it was the same.

I tried to install some gems like therubyracer, barista, it was the same.

Am I missing something very basic? Should I read a book about the bases of javascript? Should I be deported in Alaska for not understanding something very easy ? Should I retire or change job ?

Thanks for the help. I am sinking into depression.

possible duplicate of [JQuery in Rails is failing after linking from another page, works on page load](http://stackoverflow.com/questions/18623248/jquery-in-rails-is-failing-after-linking-from-another-page-works-on-page-load) — mu is too short, Sep 18 '13 at 17:49
You're not crazy, I'm getting the same issue - mainly after a GET request (which I've routed as a delete in my config/routes.rb) — reectrix, Jan 30 '14 at 02:07
possible duplicate of [Rails javascript only works after reload](http://stackoverflow.com/questions/17317816/rails-javascript-only-works-after-reload) — Marius Butuc, Apr 02 '15 at 06:27

score 12 · Accepted Answer · answered Sep 18 '13 at 17:25

12

It's because of the turbolinks gem. When you click a link the browser doesn't realy reload the page, it just does an AJAX request and changes the title and the body, leaving everything else as is. If you want to bypass that, you can either delete turbolinks from your application.js file or install the jquery-turbolinks gem and put //= require jquery.turbolinks right after you require jquery or jquery ui.

And I also advise to use $ -> or $(document).ready -> (wich is pretty much the same in most cases) in your coffesript.

answered Sep 18 '13 at 17:25

Almaron

4,127
6
26
48

Thanks man! I removed the gem and all the calls to it and it worked. Thanks thanks thanks. – d34n5 Sep 18 '13 at 17:27
1

@d34n5 actually I prefer leaving turbolinks on, 'cause they really speed up the load time of the app. The browser doesn't need to fetch all the css and js every time, and rerender it. – Almaron Sep 18 '13 at 17:30
i finally reinstalled it, installed the jquery-turbolinks gem and add the line in application.js. Everything is working fine. – d34n5 Sep 18 '13 at 17:44
Thanks thats works for me. but you need to false <%=javascript_include_tag "application", "data-turbolinks-track" => false %>, same with css too.... :) – SSR Oct 26 '13 at 10:19

score 2 · Answer 2 · answered Sep 18 '13 at 17:24

2

This is a problem due to turbolinks: your javascript file is only evaluated once (on page load).

To force your code to be reevaluated when the page change, add an event listener on the page:load event:

ready = ->
  alert 'hello'

$(document).ready(ready)
$(document).on('page:load', ready)

answered Sep 18 '13 at 17:24

Damien

26,933
7
39
40

`"ready"` should be in quotes on your last two lines methinks. – GMA Oct 21 '13 at 02:41
@GeorgeMillo no, in this context, `ready` is a callback, not an event. – Damien Oct 21 '13 at 08:13

Rails 4: coffeescript only works when there is a post request or when i reload the page

What's happening

The logs

What I tried

2 Answers2