Rails 4 アプリケーションで、ページ更新時にのみ JQuery がロードされる
質問
Rails 4アプリケーションを作成し、画像のポップアップ効果を得るためにfancyboxライブラリを追加しました。それはうまく動作しますが、ページが更新されているときだけです。ページがユーザーによって更新されない場合、jqueryはまったく動作しません。小さなjqueryメソッドでもテストしてみましたが、すべてページが更新された後にのみ動作します。私はまた、Twitterのブートストラップを使用しています。
私のassets/application.jsファイル:
//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
$(document).ready(function() {
$(".fancybox").fancybox();
$("#hand").click(function(){
if($("#check6").is(':visible'))
{
$("#check6").hide();
}
else
{
$("#check6").show();
}
});
});
どのように解決するのですか?
さて、私はあなたの問題を十分に理解しているので、答えを提供できると思います。turbolinks を使用することについては、turbolinks がブラウザによるページの再読み込みを妨げるため、document ready イベントにバインドするほとんどのプラグインやライブラリが動作しなくなるということです。そういった問題を解決するためのトリックもありますが、最も簡単な方法は jquery.turbolinks .
使用するには、これをあなたの
Gemfile
:
gem 'jquery-turbolinks'
で、これを
assets/javascripts/application.js
ファイルに追加します。
//= require jquery.turbolinks
と入力すればOKです。
ご参考まで : あなたは本当に は必要ありません。 しかし、これは便利なもので、ページの完全なリフレッシュを回避することで、リクエストをより高速にします。Turbolinksは、クリックしたリンクの内容をAJAXで取得し、同じページにレンダリングするので、アセット(JSやCSS)の再読み込みのオーバーヘッドを省くことができます。あなたのページをこれで動かしてみてください。前項のライブラリを使用して、私は実際に問題を起こすことはありませんでした。CSSやJSの数が多ければ多いほど、turbolinksを使うことで得られる改善効果は大きくなります。
関連
-
[解決済み] HTMLのinputboxでjQueryを使って数字(0-9)だけを許可する方法は?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] 複数のクラスを削除する(jQuery)
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] jQueryで複数のCSS属性を定義するには?
-
[解決済み] jQueryの複数要素の同一クリックイベント
-
[解決済み] jQueryを使用してspanに値を設定する方法
-
[解決済み】Rails 4:ターボリンクで$(document).ready()を使用する方法
-
[解決済み】Twitter Bootstrapのツールチップを動的に作成された要素に結合するにはどうすればよいですか?
-
[解決済み] jQuery append() - 追記された要素を返す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] jQueryを使用してテキストボックスの値を取得するには?
-
[解決済み] jQueryで5秒待つには?
-
[解決済み] jQueryは要素のレンダリングされた高さを取得しますか?
-
[解決済み] jQueryでloading spinnerを表示するには?
-
[解決済み] ボタンやリンクを無効化・有効化する最も簡単な方法とは(jQuery + Bootstrap)
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み] jQuery OR Selector?
-
[解決済み】Rails 4:ターボリンクで$(document).ready()を使用する方法
-
[解決済み] jQueryでinput[type=text]の値変化を検出する