1. ホーム
  2. jquery

Rails 4 アプリケーションで、ページ更新時にのみ JQuery がロードされる

2023-08-18 23:21:12

質問

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を使うことで得られる改善効果は大きくなります。