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. pastebin.com/d5QKXydy — Amaan
– Amaan, Commented Oct 25, 2013 at 2:35

M. Luisa Carrión · Accepted Answer · 2016-08-01 21:14:00Z

76

+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();
})

answered Aug 1, 2016 at 21:14

M. Luisa Carrión

1,2911 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

wolfQueen Over a year ago

I have the exact problem but im using C# and asp.net. Can you please suggest the correct scripting for this? Thanks

trueinViso Over a year ago

This is the only one that would work for me on new rails 5 app

MrWater Over a year ago

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

DNorthrup Over a year ago

Exact same issue, and I was specifically trying to figure out how to modify the turbolink load on a one-off basis. Thanks!

Belder Over a year ago

Spent ages wrestling with this. You're solution worked for me.

|

Jason Carty · Accepted Answer · 2013-06-26 19:38:21Z

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, 2013 at 19:38

Jason Carty

1,2472 gold badges13 silver badges17 bronze badges

4 Comments

Jason Carty Over a year ago

Thats coffeescript, its the syntax for a function.

Giovanni Di Toro Over a year ago

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?

Jason Carty Over a year ago

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.

Giovanni Di Toro Over a year ago

@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...

zwippie · Accepted Answer · 2013-06-26 12:14:51Z

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, 2013 at 12:14

zwippie

15.6k3 gold badges44 silver badges58 bronze badges

1 Comment

cdouble.bhuck Over a year ago

This solution worked for me and Rails 5, but instead of 'page:change' I used 'turbolinks:load'.

atw · Accepted Answer · 2015-09-09 15:07:00Z

19

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

edited Sep 9, 2015 at 15:07

atw

5,95010 gold badges43 silver badges67 bronze badges

answered Mar 17, 2014 at 2:07

Songhua Hu

3012 silver badges3 bronze badges

1 Comment

Winston Kotzan Over a year ago

No longer works with Rails 5. See discussion github.com/kossnocorp/jquery.turbolinks/issues/56 - the gem has been deprecated.

Peak Sornpaisarn · Accepted Answer · 2016-01-29 01:39:25Z

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, 2016 at 1:39

Peak Sornpaisarn

9851 gold badge10 silver badges18 bronze badges

1 Comment

Jerome Over a year ago

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

Brad · Accepted Answer · 2016-11-19 22:15:41Z

7

Rails 5 Use the jquery.turbolinks gem and using

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

answered Nov 19, 2016 at 22:15

Brad

8,80811 gold badges48 silver badges54 bronze badges

Comments

StanisLove Sid · Accepted Answer · 2018-09-06 15:33:56Z

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

answered Sep 6, 2018 at 15:33

StanisLove Sid

3223 silver badges9 bronze badges

Comments

6ft Dan · Accepted Answer · 2018-03-27 05:02:02Z

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, 2018 at 5:02

answered Mar 26, 2018 at 11:53

6ft Dan

2,4851 gold badge35 silver badges46 bronze badges

Collectives™ on Stack Overflow

Rails javascript only works after reload

8 Answers 8

8 Comments

4 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

4 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related