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.

Answer 1

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.

Answer 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)