4

Rails 4.1 アプリでは、ハッシュから読み込まれるコレクションの選択があります。select2 ブーストラップ スタイリングを使用したいのですが、機能していないようです。

select2-rails gemを含め、指示に従ってapplication.jsとapplication.cssを更新しました。

gem 'select2-rails'

//= require select2

*= require select2
*= require select2-bootstrap

collection_select は、モデルの定数からロードされます。これは特に問題に関連しているとは思いませんが、誰かに役立つ場合に備えてここに追加しました。

FLASHCARD_TYPE = {"verb" => "Verb Conjugation",
                "name" => "Word",
                "number" => "Number",
                "quiz" => "Quiz"}

レールビュー

<div class="form-group">
  <%= f.label :card_type, :class => "col-sm-2 control-label" %>
  <div class="col-sm-2">
    <%= f.collection_select(:card_type, Flashcard::FLASHCARD_TYPE, :first, :last) %>
  </div>
</div>

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

$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

レンダリングされた html は select2 JavaScript を示し、select は次のように表示されます。

 <div class="form-group">
    <label class="col-sm-2 control-label" for="flashcard_card_type">Card type</label>
    <div class="col-sm-2">
      <select id="flashcard_card_type" name="flashcard[card_type]">
         <option value="verb">Verb Conjugation</option>
         <option value="name">Word</option>
         <option value="number">Number</option>
         <option value="quiz">Quiz</option></select>
    </div>
  </div>

どうすればこれが適切に機能しますか? 実際、クラスを介したすべての選択に対してサイト全体のデフォルトを設定し、個々の ID でスタイルをオーバーライドするオプションも必要です。

これはすべての選択に対してサイト全体で機能すると思いましたが、何もしません。

$(document).ready(function(){
  $("select").select2();
});

編集

@Sanの推奨に従って、Javascriptコンソールを確認し、取得しました

Uncaught TypeError: undefined is not a function

これは失敗したコードです

$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

EDIT 2 完全な application.js ファイル

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-markdown
//= require select2
//= require_tree .

$(document).ready(function(){
  $("#flashcard_card_type").select2();
});

EDIT 3 jQueryは要素OKを見つけています

$(document).ready(function(){
    debugger;
    console.log($("#flashcard_card_type"))
  $("#flashcard_card_type").select2();
});

ログ

 [select#flashcard_card_type, context: document, selector: "#flashcard_card_type",  jquery: "1.11.1", constructor: function, toArray: function…]
 0: select#flashcard_card_type
 context: document
 length: 1
 selector: "#flashcard_card_type"
 __proto__: Object[0]

編集 - 私が試したこと

  • ターボリンクを取り外した
  • ページに JavaScript を追加しました
  • キャッシュを削除し、レールを再起動しました

私が見つけたもの

  • jQueryはタグを見つけることができます
  • select2 ライブラリは、js デバッガーのネットワーク タブから読み込まれます。

何か案は？

4

1 に答える 1

2

ただ疑問に思っています。bundle installに を追加した後に実行gemしましたGemfileか?

そうした場合、最後に確認することはselect2、ブロックを使用する前に JavaScript ファイルがロードされていることを確認することです。ページでソースを表示して確認し、ファイルselect2.jsの前にリストされていることを確認application.jsします (開発モードであると仮定します)。

于 2014-07-21T14:24:06.417 に答える