16

特定の要素が選択された後にフォームに要素を追加するフォームを作成しようとしています。たとえば、ユーザーが国を選択した後、その国に関連付けられているすべての地域/州が検出され、フォームの選択要素に挿入される ajax 呼び出しが必要です。次に、ユーザーが地域/州を選択すると、同じプロセスが実行され、選択した値に応じて別の要素がフォームに追加されます。補足として、私はこれをすべて目立たないようにしたいと思っています。

<%= form_tag(find_school_path, :method=>'get', :class => 'form-horizontal', :id => 'find_by_country_form') do %>

    <%= label_tag :country_selection, "Country" %>
    <%= select_tag :country_selection, options_from_collection_for_select(@countries, :id, :name), :prompt => "Country" %>

<% end %>

次に、そのビューの JavaScript ファイル内で、国の選択時に ajax 呼び出しを処理します。

$('#country_selection').change(function(){
  $.ajax({
    url: "find/country_selection",
    type: "GET",
    data: {'country=' + $('#country_selection option:selected').value() },
  })
});

url:次に、上記のルーティング先のコントローラー内に次のものがあります。

def country_selection
    @country = Country.find(params[:country])
    @regions = @country.regions

    respond_to do |format|
       format.js {  }
    end
end

最後に、私の country_selection.js.erb ファイルには次のものがあります。

$('#country_selection').after('<%= label_tag :region_selection, "State/Region" %><%= select_tag :region_selection, options_from_collection_for_select(@regions, :id, :name), :prompt => "State/Region" %>');

私はこれを機能させていません。これを正しい方法で行っているかどうかさえわかりません。選択を押してオプションを変更しても、ページは何も変わりません。

解決

私のコードは基本的に問題ありませんでしたが、'.change' イベントは認識されませんでした。'.live('change', function() {...})' に変更すると、問題なく動作しました。

4

1 に答える 1

2

これは私が見た中で最もきれいなコードではありませんが、基本的には何も問題はありません。

問題がどこにあるかを絞り込むことができるように、そこにいくつかのアラートをスローします。change 関数に 1 つ入れて、確実にヒットするようにするか、country_selection.js.erb に 1 つ追加して、確実にヒットするようにすることができます。これは少し役立ちます。

また、country_selection.js.erb を変更して、新しい選択が必要な div コンテナー内にパーシャルをレンダリングするようにします。そうすれば、そのコードをパーシャルに入れることができ、少し整頓されます。選択した国になる部分にパラメーターを渡すだけです。

于 2012-08-14T09:01:25.210 に答える