Rails javascript仅在重新加载后才有效

Posted 2023-02-15

【中文标题】Rails javascript仅在重新加载后才有效

【英文标题】：Rails javascript only works after reload

【发布时间】：2013-06-23 11:01:09

【问题描述】：

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

这是咖啡脚本

$(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，但它只有在我重新加载页面后才能工作。

【问题讨论】：

我遇到了同样的问题，虽然我没有使用 CoffeeScript。 pastebin.com/d5QKXydy

【参考方案1】：

我猜这是一个 turbolinks 问题。

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

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

正如提到的here。

【讨论】：

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

【参考方案2】：

这是一个 turbolinks 问题。感谢@zwippie 引导我朝着正确的方向前进！ 解决方案是将我的咖啡脚本包装在：

ready = ->
// functions

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

【讨论】：

那是咖啡脚本，它是函数的语法。

我不明白，你有没有把这个确切的代码放在你问题的代码之上？您选择了其中一项活动吗？您是否将一个嵌套在另一个中？

嗨@GiovanniDiToro，您需要做的是在page:load 事件之后运行代码。因此，在我的示例中，我将要运行的代码封装在一个名为 ready 的函数中，并将其添加为在 page:load 事件之后运行的回调。

@JasonCarty 我做到了，我通过 JQuery-> $(document).ready ->$(document).on 'turbolinks:load', -> 中的咖啡脚本调用。但我也发现在 IE 中它可以工作，但如果值为空，firefox 会自动完成......

【参考方案3】：

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

【讨论】：

不再适用于 Rails 5。请参阅讨论 github.com/kossnocorp/jquery.turbolinks/issues/56 - gem 已被弃用。

【参考方案4】：

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

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

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

gem 'jquery-turbolinks'

【讨论】：

如果您有查询，然后是 turbo 链接，然后是 jquery.turbolinks，您将产生必须创建重新加载的条件。在我看来，这是最快、最便宜和正确的答案。添加 gem + 以正确的顺序插入 app/assets/javascript/application.js 中的 require 语句

【参考方案5】：

对于 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();
)

【讨论】：

我有确切的问题，但我使用 C# 和 asp.net。您能否为此建议正确的脚本？谢谢

这是唯一适用于我的新 Rails 5 应用程序

@wolfQueen asp.net 和 C# 通常用于服务器端。您可能应该查看您的客户端文件（这可以在特定的 .js 文件上或在您的 html 中，具体取决于您要执行的操作）

完全相同的问题，我特别想弄清楚如何一次性修改 turbolink 负载。谢谢！

花了很长时间与这个搏斗。你的解决方案对我有用。

【参考方案6】：

导轨 5 使用 jquery.turbolinks gem 并使用

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

【参考方案7】：

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

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

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")

【参考方案8】：

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

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

最好位于您的app/assets/javascripts/... js 文件中