web-dev-qa-db-ja.com

Rails、link_toヘルパーをクリックした後にJavaScriptがロードされない

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");
});

どんな助けでも大歓迎です。前もって感謝します！

javascriptjqueryruby-on-rails
74
StickMaNX

Rails 4？を使用していますか？（コンソールで_Rails -v_を実行して確認してください）

この問題は、おそらく新しく追加された Turbolinks gemが原因です。これにより、アプリケーションは単一ページのJavaScriptアプリケーションのように動作します。いくつかの利点があります（ 高速 ）が、残念ながら$(document).ready()のような既存のイベントを壊します。これは、ページがリロードされないためです。これは、URLを直接ロードしたときにJavaScriptが機能する理由を説明しますが、_link_to_を使用してURLにナビゲートするときは機能しません。

RailsCast Turbolinksについてです。

いくつかの解決策があります。 jquery.turbolinks をドロップイン修正として使用するか、$(document).ready()ステートメントを切り替えて、代わりにTurbolinks _'page:change'_イベントを使用できます。

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

また、通常のページ読み込みやTurbolinksとの互換性を保つために、次のようなことを行うこともできます。

_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); 
_
132
Ryan Endacott

同じ問題が発生しましたが、 jquery.turbolinks は役に立ちません。 GETメソッドをオーバーライドする必要があることに気付きました。

私のサンプルがあります：

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

Rails 5の代わりに'page:change'を使用する必要があります'turbolinks:load' このような：

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

ソース： https://stackoverflow.com/a/3611079

23
user000001

Data-no-turbolinkを指定するdivでリンクをラップすることもできます。

例：

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

ソース： https://github.com/Rails/turbolinks

5
equn

FWIW、 Turbolinks docs から、$(document).readyの代わりにキャプチャするのにより適切なイベントはpage:change。

page:loadには、キャッシュのリロード時に起動しないという警告があります...

新しいbody要素がDOMにロードされました。同じボディで2回起動しないように、部分置換時またはページがキャッシュから復元されたときに起動しません。

また、Turbolinksはビューを切り替えるだけなので、page:changeがより適切です。

3
pyepye

インラインがないことを確認してください<script>タグ。 （インラインスクリプトタグは、ターボリンクでは不適切です）。

3
poorman