Rails 3 withプロトタイプデータベース呼び出しのあるフォーム内で動的ドロップダウンを行う

Question

フォームの一部である動的なドロップダウンを作成する良い方法を探しています。ドロップダウンには、以前のドロップダウンに基づいてデータベースからのデータが入力される必要があります。私は良いレール3 /プロトタイプソリューションを見つけられませんでした。私はjQueryと部分的な解決策を見て、prototype legacy helpersを使っています。しかし、レガシーヘルパーを使うのは良い考えではないので、まだプロトタイプを使っているうちに、それを使わずにやってみようとしています。

私はこれが大きな問題であることを理解していますが、これはすでに何度か行われていると思います。私の攻撃計画では、onchangeを使用してjavascript呼び出しをトリガーしてサーバーに要求を送信します。次に、部分的な、次の選択ボックスを適切なオプションで更新してから、繰り返します。

即時質問：プロトタイプを使用してajaxページ呼び出しを生成するにはどうすればよいですか？最初のドロップダウンの結果を自分のコントローラに送信する必要があります。 urlはcar_infos/update_make/"year"となります。

私はJavaScriptの関数を呼び出す私の大きなフォームでこの選択タグを持っています。

<%= select_tag 'year', options_from_collection_for_select(@vehicle_years, "year", "year"), {:include_blank => true, :onchange => "submitYear(this.value)" }%> 

私はRailsを使い始めるとありがとうございました。

アップデート：私はこのJavaScriptを使用してサーバーに要求を生成しています：

function submitYear(year){ 
    new Ajax.Request('/udpate_make/'+year, {method: 'get'}); 
} 

しかし、それは正しいURLを生成しません。/car_infos/update_makeを置くと、car_infos/car_infos/udpate_make /が生成されます。私が/ car_infosの部分を取る場合、/ update_makeを実行してcar_infosを終了します。私は2つまたは1つを得る。まだ 'car_infos/update_make/year'の適切なURLを生成する方法がわかりません。@ Jarylが述べたようにobserveオプションを実装しますが、引き続きURL生成に問題があります。ここに私のルート...

resources :car_infos 

match 'car_infos/update_make/:year', :controller => 'car_infos', :action => 'update_make' 

更新です：

function submitYear(year){ 
    new Ajax.Request('update_make/'+year, {method: 'get'}); 
} 

：旅の別の部分で

は、URLの重複部分を解決するために、私は次の操作を行う必要がありました前の例に欠落しているかどうかを確認します。まだそこにcar_infosを入れると、なぜそれが複製されるのかわからない。少なくとも私はサーバーに有効なAjaxリクエストを生成しています。

Answer 1

この道を下っています。より良い方法があれば私に教えてください：

は、適切なコントローラのためのルートを作成し、私のコントローラが内蔵され最初のドロップダウンを持っており、部分的にレンダリングcar_infosフォーム内

match 'car_infos/update_make/:year', :controller => 'car_infos', :action => 'update_make' 
match 'car_infos/update_model/:year/:make', :controller => 'car_infos', :action => 'update_model' 

です。

<div id="year_sel"> 
    <%= f.label :car_year %> 
    <%= select_tag 'year', options_from_collection_for_select(@vehicle_years, "year", "year"), {:include_blank => true, :onchange => "submitYear(this.value)" }%> 
    </div> 
    <div id="make_select"> 
    <%= render 'make_sel' %> 
    </div> 

あなたのapplication.jsファイル内のJavaScriptのリンクを構築します。

function submitYear(year){ 
    new Ajax.Request('update_make/'+year, { method: 'get'}); 
} 

は、Ajaxリクエストに応答して、部分的にレンダリングし、あなたの.js.rjsファイルを持っています。

page.replace_html('make_select', render('make_sel')) 

コントローラ機能では、それが.js形式に応答することを確認してください。

これは私がすべてを見つけるのに2日かかっていたので、これは誰かに役立つことを願っています。

Answer 2

従来のヘルパーが廃止されたRails 3を使用しているためです。 jQuery UJSのようなものを使用してください。

：

<%= select_tag 'year', options_from_collection_for_select(@vehicle_years, "year", "year") %> 

その後、あなたのJSファイル（私はここにjQueryを使用しています）で、あなたはJS機能を実行するコードを追加します。あなたがやっていることはそうは次のようにあなたのselectタグからJSヘルパーコードを取り出していますプロトタイプでこれを行うには

（docs for observing eventsを参照）、それはこのようなものになります。これは私が他のケースの誰にProtoypeと私の動的なドロップダウンを作成するためにやってしまったものです

Event.observe('#year', 'change', function(event) { 
    // ... 
});