Ruby-on-rails Rails javascript 仅在重新加载后才有效

Rails javascript only works after reload

提问by Jason Carty

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:

问题正是标题所说的。javaScript 在资产管道中，即 assets/javascripts/myfile.js.coffee 在 application.js 我有：

//= 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.

我可以在浏览器的源代码中看到已经加载了 javaScript，但它只有在我重新加载页面后才有效。

采纳答案by Jason Carty

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

这是一个涡轮链接问题。感谢@zwippie 带领我走向正确的方向！解决方案是将我的咖啡脚本包装成这样：

ready = ->
// functions

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

回答by M. Luisa Carrión

For turbolinks 5.0 you must use the turbolinks:loadevent, 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

对于 turbolinks 5.0，您必须使用turbolinks:load事件，该事件在第一次页面加载和每次访问 turbolink 时调用。更多信息：https: //github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

CoffeeScript code:

咖啡脚本代码：

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

JavaScript code:

JavaScript 代码：

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

回答by zwippie

I guess this is a turbolinks issue.

我想这是一个涡轮链接问题。

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

从您的项目中删除 turbolinks 或将您的脚本修改为：

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

As mentioned here.

正如这里提到的。

回答by Songhua Hu

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

您可以安装jquery.turbolinksgem 来解决问题，而无需更改您的 Javascript。

回答by Peak Sornpaisarn

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

您可以像这样将 jquery.turbolink 放在正确的位置

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

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

在 Gemfile 中，您可以安装 jquery-turbolinks gem

gem 'jquery-turbolinks'

回答by Brad

Rails 5 Use the jquery.turbolinks gem and using

Rails 5 使用 jquery.turbolinks gem 并使用

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

回答by StanisLove Sid

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

如果您使用诸如Clock Time Picker 之类的 JQuery 插件，请首先使用 jQuerydocument ready函数，这会导致您的脚本在尝试运行之前等待整个页面加载完毕，然后您可以使用turbolinks:load事件。

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

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

很高兴位于您的app/assets/javascripts/... js文件中

回答by 6ft Dan

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.

我正在尝试 Rails 5.2，发现'turbolinks:load'第一次加载页面时没有加载。这就是我需要在我的 CoffeeScript 文件中做的事情。

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

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")