web-dev-qa-db-ja.com

Rails 4ターボリンクはjQueryスクリプトが機能しないようにします

私はRails 4アプリを構築していますが、 "the Rails way"を含めようとしているjsファイルが散在しています。jqueryを移動しましたプラグインを/ vendor/assets/javascriptsに追加し、マニフェスト（application.js）を更新してそれらを要求しました。

ただし、コンパイルされたスクリプトの1つから一貫性のない動作が発生しています。私は_require_tree ._を使用してapplication.jsで参照されるprojects.jsというコントローラー固有のjsファイルを持っています：

_//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .
_

ファイルが正しくインクルードされており、正常に動作しています...半分の時間です。残りの半分の時間、projects.jsの内容は何もしないようです（ほとんどがjqueryアニメーションと一部のajaxリクエストです）。動作しない場合、ボタンを数回クリックしますが、何も起こりません。その後、このエラーをスローします。

_Uncaught TypeError: Cannot read property 'position' of null 
turbolinks.js?body=1:75
_

これは、スクリプトが個々のビューにある場合には決して起こりませんでした（間違った方法）ので、問題はjavascriptコードにないことはかなり確信しています。関連する可能性のある他の詳細の1つは、projects.jsの内容が$(document).ready(function(){でラップされていることです。また、開発モードでテストしているため、javascriptとcssはアセットパイプラインによって結合されません。

ここで何が起こっているのでしょうか？私はRailsが初めてですが、すべての規約に従うために最善を尽くしました。

更新！

予測可能ですwhenプロジェクトスクリプトが機能しません。最初のページの読み込みは毎回機能します。次に、project.jsの動作を使用する新しいページへのリンクをクリックすると、secondページが機能しなくなります。数回クリックすると、最終的に上記のエラーがスローされます。理由はまだわかりませんが、これはターボリンクに関連しているのではないかと考えています。

javascriptruby-on-rails-4turbolinks
47
emersonthis

$(document).ready(function(){はTurbolinksでは実際には機能しません。 ターボリンク ：

... Webアプリケーション内のリンクのフォローを高速化します。各ページが変更されるたびにブラウザにJavaScriptとCSSを再コンパイルさせる代わりに、現在のページインスタンスを存続させ、ヘッドの本文とタイトルのみを置き換えます。

したがって、ページは一度だけロードされ、必要に応じてピースが置き換えられます。ページは1回しか読み込まれないため、$(document).ready()コールバックはサイトが最初にアクセスされたときにのみトリガーされます。Turbolinksは実際にページを切り替えないため、ページを切り替えてもドキュメント対応のイベントは発生しません。 ファインマニュアル から：

Turbolinksの場合、ページは完全なリロードなしで変更されるため、DOMContentLoadedまたはjQuery.ready()に依存してコードをトリガーすることはできません。その代わり、Turbolinksはドキュメントでイベントを発生させて、ページのライフサイクルへのフックを提供します。

代わりに、Turbolinksイベントの1つをリッスンすることをお勧めします。

  • page:changeページが解析され、新しいバージョンとDOMContentLoadedに変更されました
  • [...]
  • page:loadは、読み込みプロセスの最後に起動されます。

page:changeは通常、新しいページをロードしてTurbolinksページキャッシュからページを復元するときにトリガーされるため、探しているものです。

JavaScriptのallを確認し、完全なQAスイープを行うまで、Turbolinksをオフにすることをお勧めします。また、サイトの速度をテストして、使用する価値があるかどうかを確認する必要があります。

もう1つのオプションは、 jquery.turbolinks を使用してパッチを当てることです。私はこれを使用しませんでしたが、 他の人 はそれを良い効果のために使用しています。

43
mu is too short

これに対する解決策は、これですでに利用可能です railscast

ここに一例があります（私が使用したいもの）。

ready = ->
  # ..... your js

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

gemもあります これにより、この問題を古い方法で解決できます。それは本当にうまくいきます:)

28
Ole Henrik Skogstrøm

私はこの回答がREAAAAAAALLLLLLLYYYYY Late ...であることを理解していますが、私はそれを追加すると思いました。

私は先週この問題を抱えました。Foundationを機能させようとしている間に..

最初に追加しました：

gem 'jquery-turbolinks'

次に、application.jsに次のように配置します。

//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

そして、そのすぐ下にこれを追加しました：

$(document).on('turbolinks:load', function() {

});

そしてすべてが私のために働いた。お役に立てれば！

1
Shawn Wilson