58

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.

1

8 Answers 8

75
+50

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();
})
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, 2016 at 6:06
  • 2
    This is the only one that would work for me on new rails 5 app
    – trueinViso
    Jan 18, 2017 at 0: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 8, 2017 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, 2017 at 1:51
  • Spent ages wrestling with this. You're solution worked for me.
    – Belder
    Feb 7, 2018 at 3:43
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)
4
  • 3
    Thats coffeescript, its the syntax for a function. Jan 20, 2016 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? Jan 25, 2019 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. Jan 28, 2019 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... Jan 29, 2019 at 12:46
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.

1
  • This solution worked for me and Rails 5, but instead of 'page:change' I used 'turbolinks:load'. Jan 17, 2018 at 21:12
19

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

1
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'
1
  • 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, 2016 at 14:14
7

Rails 5 Use the jquery.turbolinks gem and using

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.