5

私はRuby on Railsにフォームを書いています.Javascript関数を呼び出す選択ボックスが必要です。フォームファイルでは、これは私が選択ボックスを追加しようとする使用していますラインである:私application.jsファイルでRuby on Railsでフォーム要素にonchangeリスナーを追加する方法は?

<%= f.select :question_select, Question.all, :prompt => "New Question", :onchange => "displayQuestion(this)" %> 

を、私は持っている:私はするつもりです

function displayQuestion(link) { 
    alert("Changed question"); 
} 

これらのフォーム要素をページに動的に追加するので、application.jsファイルでjQueryを使用して、特定のフォーム要素に関数を追加することはできません。誰かが私が間違っていることを教えてもらえますか?

答えて

2

あなたが知っているかもしれませんが、Railsの3が強く、基本的にはJavaScriptが力仕事をして、そしてあなたがあなたのフォームジェネレータとのあなたのクライアント側の双方向性を結び付けるべきではないということを意味UJS(控えめなJavaScriptを)、奨励。動的に要素を追加しているだけで、jQueryを使用して変更を監視することができないというわけではありません。テンプレートで

<%= f.select :question_select, Question.all, {prompt: "New Question"}, data: { question: true } %> 

これは、次のようなものを作成します。

<select id="..." data-question="true"> 
    ... 
</select> 

次に、JavaScriptで、あなたはdata-questionセットで任意の要素にchangeイベントを監視するイベントの委任を使用することができます文書全体で:

$(function() { 
    $(document).on('change', '[data-question]', function() { 
    // this == the element that fired the change event 
    alert('Changed question'); 
    }); 
}); 

注:代わりにdata-questionを使用しての、あなたは、単に要素にクラスを追加し、そのクラスを使用するようにjQueryのを修正することができます:

$(function() { 
    $(document).on('change', '.question', function() { 
    // this == the element that fired the change event 
    alert('Changed question'); 
    }); 
}); 

私は、一般的に私の中にCSSセレクタの使用を最小限に抑えるようにしてくださいJavaScriptを使用することで、デザイナーは自由に自分の望むものを変更することができますが、それだけでも機能します。

+1

なぜ「...、data:{question:true}」とか。 '...、 'data-question' => true'? – 244an

+1

この場合、それらは同じです。しかし、 'data:{question_id:10、other_thing: 'asdf'}'のようなハッシュの場合、Railsは 'data-question-id =" 10 "data-other-thing =" asdf "'を実行します。かなりいいですね。 –

1
select_tag :variable, options_from_collection_for_select(:all, :id, :name), :onchange => 'your_onchange_handler()' 
関連する問題