Rails资产管道无法加载我的JavaScript文件（为什么这段代码不起作用）

Question

如果我把这段代码放在视图中，它可以正常工作；如果我直接把它包含在 Application.js 文件中，也可以正常工作。但是，如果我把它包含在 assets/javascripts/mailers.js 文件中，它就不能工作了……有没有人能告诉我我做错了什么，谢谢！

function myFunction(val) {
if (val.length == 10) {
document.getElementById('search_button').focus();}};

也许我调用的方式不正确？以下是视图中的代码：

<%= text_field_tag :search_mailer, nil, autofocus: true, onkeyup: "myFunction(this.value)" %>

我需要在上面提供的mailers.js文件中添加什么内容吗？因为那个文件里只有这些代码。mailers.js文件中唯一的代码是:

function myFunction(val) {
if (val.length == 10) {
document.getElementById('search_button').focus();}};

- ja11946

---

可能只是一个打字错误，但路径应该是：assets/javascripts/，而不是 assets/jacascripts/。 - Mathias Vonende

文件mailers.js是否在application.js中通过require指令//= require mailers被引用？ - Mathias Vonende

或者可以通过 javascript_include_tag 包含 mailers.js。 - j-dexx

是的，只是打错了。我在application.js文件中有这个：//= require mailers.js而在application.html.erb中，我有"<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>"。 - ja11946

除了我已经加入的内容之外，我是否需要在mailers.js文件中添加其他内容？因为那是该文件中唯一的内容。 - ja11946

Answer 1

你可能忘了在清单文件中包含这个文件。清单文件会将 assets/javascripts 目录下的所有 .js 文件预编译成一个大文件。这个文件运行在你的应用程序上。如果你没有在那里放置你的 .js 文件，它就不会被包含，这就是为什么什么都不会发生的原因。

正确的方式是：

//= require mailers.js

在你的application.js文件中。此外，默认情况下，你拥有

//= require_tree .

需要从assets/javascript路径引入所有js文件。 如果您想将其专门包含在视图中，请加入以下内容：

<%= javascript_include_tag "mailers", "data-turbolinks-track" => true  %>

如果预编译为假，您需要单独添加该文件：

在config / initializers / assets.rb中

 Rails.application.config.assets.precompile += %w( mailers.js )

或者 在config/application.rb文件中

config.assets.precompile += %w( mailers.js )

如果你有一个同名的.js和.coffeescript文件，应用程序可能会预编译错误的文件。你可以尝试运行

   rake assets:clean
   rake assets:precompile

然后再次运行服务器。

- Hristo Georgiev

---

是的，抱歉那是一个打字错误，我在application.html.erb文件中确实有<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>。 - ja11946

前往config/initializers/assets.rb文件并添加以下代码：Rails.application.config.assets.precompile += %w( mailers.js ) - Hristo Georgiev

基本上按照错误提示所说的去做，你就可以顺利解决问题了 :)。我已经更新了解决方案。当你进入生产环境时，你也可以前往config/application.rb并添加 config.assets.precompile += %w( mailers.js ) - Hristo Georgiev

尽量避免这样做，因为每次这样做都需要预编译和清理资源。此外，你为什么需要这样的东西呢？我更新了解决方案。 - Hristo Georgiev

感谢所有的帮助。 - ja11946

Answer 2

我在Rails 5中也遇到了同样的错误。当javascript文件与coffee文件同名时，javascript文件没有被加载。

我通过更改文件名来解决了这个问题。

希望能对您或其他人有所帮助。

- bonafernando

---

它确实解决了我的问题，使用Rails 5.1.4。非常感谢。 - Thrabbit

Answer 3

你尝试过像这样在application.js清单中包含你的mailers.js文件吗？ //= require mailers

- Jack Ryon

---

是的，它已经包含在内了。我在浏览器控制台中得到的错误是“未捕获的引用错误：myFunction未定义”。 - ja11946

Answer 4

我曾经遇到过与默认的Rails 5应用程序生成类似的问题。我创建了一个新的.js文件，当从新文件中调用函数时，它找不到它。我通过在application.js文件中添加//= require_tree .来解决了这个问题。

- Mark

Answer 5

检查您的布局文件。如果javascript_include_tag在页面的头部部分，请尝试将其从那里移除，然后将其放置在关闭的</body>标记之前。另一个解决方法是将您的代码放置在document.ready函数之间，如下所示：

$(document).ready(function (){
  function myFunction(val) {
    if (val.length == 10) {
      document.getElementById('search_button').focus()
    };
  };
}

- Van_Paitin

Answer 6

我通过将js文件更改为以下内容来解决了这个问题：

$(document).on('turbolinks:load', function() {
  function myFunction(val) {
    if (val.length == 10) {
      document.getElementById('search_button').focus();
    }
});

- B-M