Rails JavaScript 只有在重新加载后才能正常工作

Question

Rails JavaScript 只有在重新加载后才能正常工作

javascriptruby-on-railsruby-on-rails-3asset-pipeline

58

问题就是标题所说的那样。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 .

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

我可以在浏览器的源代码中看到JavaScript已经被加载，但只有在我重新加载页面后它才起作用。

- Jason Carty

我遇到了同样的问题，尽管我没有使用CoffeeScript。http://pastebin.com/d5QKXydy - Amaan

8个回答

29

这是一个 turbolinks 问题。感谢 @zwippie 带我朝着正确的方向前进！解决方案是将我的 Coffeescript 包装在这个中：

ready = ->
// functions

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

- Jason Carty

3

那是 Coffeescript，它是一个函数的语法。 - Jason Carty

我不明白，你是把这段代码放在你问题的代码之上吗？你选择了其中一个事件吗？你将其中一个嵌套在另一个事件中了吗？ - Giovanni Di Toro

嗨，@GiovanniDiToro，你需要做的是在“page:load”事件之后运行代码。因此，在我的示例中，我将要运行的代码包装在一个名为ready的函数中，并将其作为回调添加到“page:load”事件之后运行。 - Jason Carty

@JasonCarty 我已经这样做了，我通过JQuery内的coffeescript进行调用 -> $(document).ready ->$(document).on 'turbolinks:load', ->。但我也发现在IE中它可以工作，但是如果值为空，Firefox会自动完成... - Giovanni Di Toro

25

我猜这是一个 turbolinks 问题。

要么从你的项目中删除 turbolinks，要么修改你的脚本为以下内容：

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

正如这里所提到的。

- zwippie

这个解决方案适用于我和Rails 5，但是我使用了'turbolinks:load'而不是'page:change'。 - cdouble.bhuck

19

您可以安装 jquery.turbolinks gem 来解决问题，无需更改您的 JavaScript。

- Songhua Hu

4

无法在Rails 5中使用。请参阅讨论 https://github.com/kossnocorp/jquery.turbolinks/issues/56 - 此gem已被弃用。 - Winston Kotzan

9

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

您可以将jquery.turbolink放置在正确的位置，如下所示

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

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

gem 'jquery-turbolinks'

- Peak Sornpaisarn

如果你使用了查询、Turbo Links 和 jQuery.TurboLinks，那么你将需要创建重新加载的条件。在我看来，这是最快、最便宜和正确的答案。添加 gem 并按正确顺序在 app/assets/javascript/application.js 中插入 require 语句。 - Jerome

7

Rails 5 使用jquery.turbolinks宝石并使用。

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

- Brad

2

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

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

最好将以下代码放置在您的app/assets/javascripts/...js文件中

- StanisLove Sid

0

我正在尝试Rails 5.2，并发现在页面第一次加载时未加载'turbolinks:load'。这是我需要在我的CoffeeScript文件中执行的操作。

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

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")

- 6ft Dan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- M. Luisa Carrión · Accepted Answer

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

CoffeeScript代码：

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

JavaScript 代码：

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