0

問題：

Bootstrap Switch は、特定のブラウザではトグルせず、最初の訪問時ではなく、ページがリロードされたときにのみ読み込まれます。(これを 2 つの別々の質問にする必要がありますか?)

説明：

私はこれを調査してきましたが、最終的にイベントスイッチがトリガーされなかった理由を突き止めました. ただし、ユーザーが最初にページに移動したときに、スイッチはまだ表示されません。スイッチを表示するには、ページをリロードする必要があります。また、スイッチは Chrome では正常に機能しますが、Safari や Firefox では機能しません。(このビデオで見られるように:誤動作を示すビデオ

バージョン:

Ruby: 2.2.1p85 (2015-02-26 リビジョン 49769) [x86_64-darwin14]

レール: 4.2.0

Gem:ブートストラップ スイッチ レール 3.3.3

サファリ: 8.0.8 (10600.8.9)

Firefox: 24.0 (40.0.2 が現在のリリースであるため、これは非常に古いバージョンであることに気付きました)

クロム: 45.0.2454.93 (64 ビット)

私のコード:

Gemfile

gem 'bootstrap-switch-rails', '~> 3.3.3'

アプリ/資産/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap-switch

アプリ/アセット/スタイルシート/application.css

/*
*= require_tree .
*= require_self
*= require bootstrap3-switch
*= require rails_bootstrap_forms
*/

このコードは<head>、次のページ内の情報に追加されています。

アプリ/ビュー/レイアウト/_header.html.erb

<script type="text/javascript">
    $(document).ready(function() {
        $('input:checkbox').bootstrapSwitch();
    });
</script>

この情報はページ自体にあります

app/views/devise/registrations/edit.html.erb

<div class="col-md-3">
    <%= f.label :private, "Private" %>
    <%= f.check_box :private, :data => { :size => 'large', 'on-color'=>'success', 'on-text'=>'On', 'off-text'=>'Off', 'animate'=>'true'}, :label=>'This sets your profile to be hidden from searches' %>
</div>

質問:

1) 最初の訪問時にスイッチが読み込まれず、ページのリロード時にのみ読み込まれるのはなぜですか?

2) スイッチが Chrome でのみ正しく機能し、Safari や Firefox では機能しないのはなぜですか?

4

1 に答える 1

0

私の質問の最初の部分を調査した後 (最初の訪問時にスイッチがロードされず、ページのリロード時にのみロードされないのはなぜですか?)、次の回答を思いつきました。 Safari や Firefox ではなく、Chrome で？）

StackOverflow に関する質問を見つけました ( Jquery gets loaded only on page refresh in rails 4 application )。@Ian から提供された回答で両方の問題が解決しました。

解決：

@Ian は、jquery-turbolinksという宝石を使用することを提案しました。

コード

これが私が追加/変更したコードです（gemのgithubページの指示に従いました）。

Gemfile (次の行を追加):

gem 'jquery-turbolinks'

app/assets/javascripts/application.js (この行を追加しました):

//= require jquery.turbolinks

アセットの順序を次のように変更しました。

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap-switch
//= require turbolinks

説明：

したがって、ページが更新されていない限りスイッチが表示されなかった理由は、ターボリンク機能によるものです。これにより、CSS と JQuery をリロードせずに、AJAX を介してページの情報が呼び出されます。これにより、ページの読み込み時間が短縮され、あると便利な機能です。ただし、最初のページの読み込み時に必要な JQuery が呼び出されていない場所を見たような問題が発生する可能性があります。

この gem ( jquery-turbolinks ) は、JQuery を呼び出すことで問題を解決しますが、それでもターボリンクを使用します。そのため、プロファイル編集ページの最初のロードで、スイッチが表示されます。

現在、ページを更新しても JQuery が正しく読み込まれないという問題もあったに違いありません。これにより、スイッチがバグっていました。スクリプトがすべて正しく実行されるようになったので、スイッチは Safari、Chrome、および Firefox で正しく動作します。だから、両方の問題が解決しました！

于 2015-09-24T21:12:43.677 に答える