Rails javascript only works after reload

问题:

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:

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

回答2:

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)

回答3:

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.

回答4:

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

回答5:

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'

回答6:

Rails 5 Use the jquery.turbolinks gem and using

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

回答7:

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

回答8:

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