Railsでドロップダウンリストとajaxを使ってデータをフィルタリングする方法

Question

私のアプリにはダッシュボードがあり、ユーザはデータベースから項目を表示したりフィルタリングしたりすることができます。現在私のコントローラはの配列に基づいてReportのすべてのレコードを選択します。

ダッシュボードインデックスビューでdashboard_controller.rbのindexアクション

@latest_report = Report.where.not(:assigned_user_id => nil).where(:assigned_user_id => @assigned_user_ids).where(reporting_date: Report.select('MAX(reporting_date)')).order(:assigned_user_id) 

私は、ユーザーがallまたは特定assigned_user_idのどちらかを選択することができselect_tagを持っています。 select_tagは@employeesインスタンス変数から値をとります。この変数には利用可能な選択肢があります。assigned_user_idsです。私は今、何をしたいか

<%= select_tag "teams", options_from_collection_for_select(@employees, "assigned_user_id", "full_name"), :include_blank => 'All' %> 

は、アプリは、次の手順を実行するように、この時点でAJAXを含めることです

index.html.erb：

• ユーザーを選択した場合特定のassigned_user_idフィルタ@latest_reportこの値で、それをajax経由でレンダリングします
• ユーザが"All"フィルタ@latest_reportをすべて利用可能に選択した場合assigned_user_idsをajax経由でレンダリングする

どうすれば（宝石を使わずに）これを達成できますか？

UPDATE は、私はそれはいくつかのlink_toと専用routeで動作させることができました。しかし、私はselect_tagを使ってこの問題を解決するのは混乱しています（これは、私の経路にはajax経由でレンダリングされません）。また、 "All"を選択するオプションもあります。

Answer 1

私はSelect with Ajaxを入力するというアイデアを得て、あなたのケースに申し込むことができます。

まずビューWHAT_WILL_BE_UPDATED、あなたのフォルダ内の2つのファイルが必要になります（私の例では、市されます - 私が選択状態に応じて街を更新します！）：あなたの部分_citiesで

Cities view 
    -> _cities.html.erb 
    -> update_city.js.coffee 

：

あなたのupdate_city.js.coffeeファイルで

<% @city.all.each do |t| %> 
    <option value="<%= t.id %>"><%= t.city_name %></option> 
<% end %> 

：

$("#select_city").empty() 
    .append("<%= escape_javascript(render partial: 'cities/city', object: @city) %>") 

# Here, "#select_city" is the ID of your Select! So, we are basically empty your current Select and then populate with what you have in your partial _city. 

へAJAX要求を解決するため、資産にあなたのJSファイルにこれを追加します。

<%= m.label :state, "State" %> 
<%= m.select(:state_id, State.select("id, name").order(:name).collect {|p| [ p.name, p.id ] }, { include_blank: false, selected: m.object.state_id}, { id: 'state_id' }) %> 

<%= m.label :city, "City" %> 
<%= m.select(:city_id, City.by_state(State.first.id).collect {|p| [ p.city_name, p.id ] }, { include_blank: false, selected: m.object.city_id }, { id: 'select_city' }) %> 

：

私の見解では

def update_city 
    @city = City.by_state(params[:state_id]).order(:city_name) 
    respond_to do |format| 
    format.js {render layout: false} 
    end 
end 

private 
    def city_params 
    params.require(:city).permit(:state_id) 
    end 

私はこれらの2つの選択があります：

$ -> 
    $(document).on 'change', '#state_id', (evt) -> 
    $.ajax 
     url: '/cities/update_city' 
     type: 'GET' 
     dataType: 'script' 
     data: { 
     state_id: $("#state_id option:selected").val() 
     } 
     error: (jqXHR, textStatus, errorThrown) -> 
     console.log("AJAX Error: #{textStatus}") 
     success: (data, textStatus, jqXHR) -> 
     console.log("AJAX Sucesss: #{textStatus}") 

# Here, we are add a "on change" event to your your Select responsible to trigger the Ajax call. In this example, the Select with id "state_id" is responsible. I'm passing as arguments to Ajax the value selected in the Select with id "state_id"! 

を市のコントローラでは、我々はこれを持っています

私はあなたを助けてくれることを願っています！ 幸運を祈る！