Rails javascript only works after reload

Question

The problem is exactly what the heading says. The javaScript is in the asset pipeline i.e assets/javascripts/myfile.js.coffee In the application.js I have:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= requier twitter/bootstrap
//= require jasny-bootstrap
//= require_tree .

This is the coffeescript

$(document).ready ->
  $("#close").click ->
    $(this).parent().parent().slideUp("slow")




  $( "#datepicker" ).datepicker
    dateFormat : "yy-mm-dd"


  player_count = $("#player option").length


  $('#btn-add').click ->
    $('#users option:selected').each ->
      if player_count >= 8
        $('#select-reserve').append("<option      value='"+$(this).val()+"'>"+$(this).text()+"</option>")
        $(this).remove()    
      else
        $('#player').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
        $(this).remove()
        player_count++


  $('#btn-remove').click ->
    $('#player option:selected').each ->
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
      $(this).remove()
      player_count--


  $('#btn-remove-reserve').click ->
    $('#select-reserve option:selected').each ->
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
      $(this).remove()


  $("#submit").click ->
   $("select option").prop("selected", "selected")

I can see in the source code on the browser that the javaScript has been loaded, but it only works after I reload the page.

I'm having the same issue, though I'm not using CoffeeScript. http://pastebin.com/d5QKXydy — Amaan, Oct 25 '13 at 02:35

score 76 · Answer 1 · answered Aug 01 '16 at 21:14

76

For turbolinks 5.0 you must use the turbolinks:load event, which is called the first time on page load and every time on a turbolink visit. More info: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

CoffeeScript code:

$(document).on 'turbolinks:load', ->
  my_func()

JavaScript code:

document.addEventListener("turbolinks:load", function() {
  my_func();
})

answered Aug 01 '16 at 21:14

M. Luisa Carrión

1,291
1
11
8

I have the exact problem but im using C# and asp.net. Can you please suggest the correct scripting for this? Thanks – wolfQueen Dec 27 '16 at 06:06
2

This is the only one that would work for me on new rails 5 app – trueinViso Jan 18 '17 at 00:18
@wolfQueen asp.net and C# usually are for server-side. You should probably look on your client side files (this can be on specific .js files or within your html depending on what you are trying to do) – MrWater Mar 08 '17 at 21:31
Exact same issue, and I was specifically trying to figure out how to modify the turbolink load on a one-off basis. Thanks! – DNorthrup Jul 21 '17 at 01:51
Spent ages wrestling with this. You're solution worked for me. – Belder Feb 07 '18 at 03:43
@MariaLuisa I am having this issue and wish to put the JavaScript and CoffeeScript into my app, however I do not know where to put the two code blocks. Can you tell me where to put them? – stevec Jul 04 '18 at 04:25
I couldn't get this to work. But Joseph N's answer [here](https://stackoverflow.com/questions/14227363/using-turbolinks-in-a-rails-link-to/37999169#37999169) worked for me – stevec Jul 04 '18 at 06:33
This is the only solution that worked for me. Thanks a bunch – zekromWex Aug 22 '18 at 09:59

score 29 · Accepted Answer · answered Jun 26 '13 at 19:38

29

This was a turbolinks problem. Thanks to @zwippie for leading me in the right direction! The solution was to wrap my coffeescript in this:

ready = ->
// functions

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

answered Jun 26 '13 at 19:38

Jason Carty

1,247
2
13
17

3

Thats coffeescript, its the syntax for a function. – Jason Carty Jan 20 '16 at 19:51
I don't understand, did you put this exact code on top of the code from your question? Did you choose one of the events? Did you nest one within the other? – Giovanni Di Toro Jan 25 '19 at 15:50
Hi @GiovanniDiToro, What you need to do is run the code after the `page:load` event. So in my example, I wrapped the code I wanted to run inside a function called ready, and added that as a callback to be run after the `page:load` event. – Jason Carty Jan 28 '19 at 19:17
@JasonCarty I did that, I called via coffeescript inside JQuery-> $(document).ready ->$(document).on 'turbolinks:load', -> . But I also found out that in IE it works , but firefox auto-completes if value is empty... – Giovanni Di Toro Jan 29 '19 at 12:46

score 25 · Answer 3 · answered Jun 26 '13 at 12:14

25

I guess this is a turbolinks issue.

Either remove turbolinks from your project or modify your script to something like:

$(function() {
  initPage();
});
$(window).bind('page:change', function() {
  initPage();
});
function initPage() {
  // Page ready code...
}

As mentioned here.

answered Jun 26 '13 at 12:14

zwippie

15,050
3
39
54

This solution worked for me and Rails 5, but instead of `'page:change'` I used `'turbolinks:load'`. – cdouble.bhuck Jan 17 '18 at 21:12

score 19 · Answer 4 · edited Sep 09 '15 at 15:07

19

You can install the jquery.turbolinks gem to solve the problem without changing your Javascript.

edited Sep 09 '15 at 15:07

atw

5,428
10
39
63

answered Mar 17 '14 at 02:07

Songhua Hu

301
2
3

4

No longer works with Rails 5. See discussion https://github.com/kossnocorp/jquery.turbolinks/issues/56 - the gem has been deprecated. – Winston Kotzan Jun 25 '17 at 01:13

score 9 · Answer 5 · answered Jan 29 '16 at 01:39

9

You can have your jquery.turbolink place at the right position like this

 //= require jquery 
 //= require jquery.turbolinks 
 //= require jquery_ujs 
 //= require bootstrap-sprockets 
 //= require turbolinks

And in the Gemfile you can install the jquery-turbolinks gem

gem 'jquery-turbolinks'

answered Jan 29 '16 at 01:39

Peak Sornpaisarn

885
1
9
18

if you have query, then turbo links then jquery.turbolinks you will generate the condition of having to create reloads. This is the fastest, cheapest and proper answer in my view. add gem + insert **in the proper order** the require statement in app/assets/javascript/application.js – Jerome Jul 18 '16 at 14:14

score 7 · Answer 6 · answered Nov 19 '16 at 22:15

7

Rails 5 Use the jquery.turbolinks gem and using

$( document ).on('turbolinks:load', function() {
  // your code
}

answered Nov 19 '16 at 22:15

Brad

8,044
10
39
50

score 2 · Answer 7 · answered Sep 06 '18 at 15:33

If you work with JQuery plugins such as Clock Time Picker, firstly use jQuery document ready function, which causes your script to wait until the entire page is loaded before attempting to run and then you can use turbolinks:load event.

JQuery(function($) {
  $(document).on('turbolinks:load', function() {
    $('.time').clockTimePicker();
  });
});

It is good to be situated in your app/assets/javascripts/... js file

6ft Dan · Answer 8 · 2018-03-27T05:02:02.293

0

I'm trying Rails 5.2 and found that 'turbolinks:load' wasn't getting loaded the first time a page loads. This is what I needed to do in my CoffeeScript file.

document.addEventListener('turbolinks:load', ->
  # ... CoffeeScript code here
)

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")

edited Mar 27 '18 at 05:02

answered Mar 26 '18 at 11:53

6ft Dan

2,365
1
33
46

Rails javascript only works after reload

8 Answers8

Linked

Related