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 being 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:prepile
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.
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 being 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:prepile
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.
Share Improve this question asked Sep 18, 2013 at 17:20 d34n5d34n5 1,31810 silver badges18 bronze badges 3- possible duplicate of JQuery in Rails is failing after linking from another page, works on page load – mu is too short Commented Sep 18, 2013 at 17:49
- 1 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 Commented Jan 30, 2014 at 2:07
- possible duplicate of Rails javascript only works after reload – Marius Butuc Commented Apr 2, 2015 at 6:27
2 Answers
Reset to default 12It'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.
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)