单击link_to帮助器后,Rails,JavaScript无法加载


78

当我在rails中使用link_to帮助器时,加载JavaScript时遇到了一些麻烦。当我手动输入带有'localhost:3000 / products / new'的URL或重新加载页面时,将加载javascript,但是当我经过如下所示的链接时,jQuery$(document).ready将不会加载到新页面上。

Link_to,当我单击此链接时,javascript无法加载:

<%= link_to "New Product", new_product_path %>

products.js文件

$(document).ready(function() {
    alert("test");
});

任何帮助将非常感激。提前致谢!

Answers:


139

您在使用Rails 4吗?(通过rails -v在控制台中查找来发现)

此问题可能是由于新添加的Turbolinks gem。它使您的应用程序的行为类似于单页JavaScript应用程序。它有一些好处(更快),但是不幸的是,它破坏了一些现有事件,例如,$(document).ready()因为从未重新加载页面。这可以解释为什么当您直接加载URL而不是通过导航到该URL时JavaScript可以工作的原因link_to

这是有关Turbolinks的RailsCast

有几种解决方案。您可以使用jquery.turbolinks作为嵌入式修复程序,也可以将$(document).ready()语句切换为使用Turbolinks'page:change'事件:

$(document).on('page:change', function() {
    // your stuff here
});

另外,您可以执行以下操作以与常规页面加载以及Turbolink兼容:

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on('page:change', ready);

如果您使用的是Ruby on Rails> 5(可以通过rails -v在控制台中运行来检查),请使用'turbolinks:load'而不是'page:change'

$(document).on('turbolinks:load', ready); 

是的,这是Rails4。您发布的内容确实可以通过link_to点击进行修复。它还使它无法在常规的手动url页面加载中工作,是否有一种方法可以使这两种方法都起作用而不重复我的js代码?谢谢!
StickMaNX

1
嗯,很奇怪。我认为这对两者都有效。最好的解决方案是使用链接的jquery.turbolinks gem,因为它也可以处理该问题。注意:我没有使用过,所以不确定。它看起来像它重新绑定'page:load'调用$(document).ready()的,所以你只想尽一切正常。
瑞安·恩达科特

我编辑了我的答案以提出一种无需jquery.turbolinks即可解决的解决方案:)
Ryan Endacott

1
太棒了!这对我帮助很大 !
Ajay 2014年

对于任何大小和复杂性的应用程序,都不希望编辑每个js文件中的所有代码(希望document.ready能够像往常一样工作)。为什么有人设计出使document.ready不能像往常一样工作的东西,并称其为功能?有没有办法告诉Turbolinks不要破坏document.ready-还是卸载它的唯一选择?
JosephK

65

我遇到了同样的问题,但是jquery.turbolinks没有帮助。我注意到我必须重写GET方法。

有我的样品:

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>

2
这是最快的解决方案。
Jose Torres 2015年

1
这样就解决了问题,link_to但事实证明,真正的问题是<script>页面页脚中的内联标签。(内联脚本标签对turbolinks不利)。
穷人2015年

1
最好的解决方案是删除imo的turbolink。用“变通办法”来修复应该“正常工作”的东西是一个巨大的时间杀手。去年,我本可以仅从turbolinks-fixs休假一周。
JosephK

1
这件事情让我感到很快乐 !

快速修复的好答案,但有关最佳解决方案的信息,请参见@RyanEndacott的答案
dimpiax

25

如果您不是在轨道5上'page:change',则应该这样使用'turbolinks:load'

$(document).on('turbolinks:load', function() {
  // Should be called at each visit
})

资料来源:https : //stackoverflow.com/a/36110790


这和Ice-Blaze的解决方案都对我有用。但是我最喜欢这种方式,因为我不必更改所有链接。(我正在使用Rails 5)
肖恩

5

您也可以使用指定data-no-turbolink的div来包装链接。

例:

<div id="some-div" data-no-turbolink>
    <a href="/">Home (without Turbolinks)</a>
</div>

资料来源:https : //github.com/rails/turbolinks


3

确保没有任何内联<script>标签。(内联脚本标签对turbolinks不利)。


3

FWIW,来自Turbolinks文档,是更适合捕获的事件,而不是$(document).readyis page:change

page:load 有一个警告,它不会在缓存重新加载时触发...

新的body元素已加载到DOM中。在部分替换或从缓存还原页面时不触发,以免在同一正文上触发两次。

而且由于Turbolinks只是切换视图,page:change所以更合适。


优胜者!page:load没有为我工作。我推荐这种解决方案。
TJ Biddle

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.