0
レールアプリにajaxドロップダウンを実装しようとしています。カテゴリを選択すると、サブカテゴリのドロップダウンで、選択したカテゴリに従ってサブカテゴリが設定されます。現在、カテゴリを選択して「フィルタ」を入力して次のページに移動したときにのみ、サブカテゴリのドロップダウンが表示されます。これは、JSはこれがindex.html.erbある equipment.jsレールアプリにajaxドロップダウンを実装しようとしています
$(document).ready(function($) {
// Fetch sub-categories as per category selected
$("select#category_id, select#wanted_equipment_category_id").selectric().change(function(e){
$.getJSON("/fetch_sub_categories",{category_id: $(this).val(), ajax: 'true'}, function(response){
var options = '';
for (var i = 0; i < response.length; i++) {
options += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
}
if (e.target.id=="category_id"){
$("select#sub_category").html('<option value="">Sub-Category</option>'+options);
var Selectric = $('select#sub_category').data('selectric');
Selectric.init();
}
if (e.target.id=="wanted_equipment_category_id"){
$("select#wanted_equipment_sub_category_id").html('<option value="">Select Sub-Category</option>'+options);
var Selectric = $('select#wanted_equipment_sub_category_id').data('selectric');
Selectric.init();
}
})
})
$(document).ajaxStop(function() {
$('.loader').hide();
});
$(document).ajaxStart(function() {
$('.loader').show();
});
});
を提出さ
def index
@categories = Category.roots.active.all
if (params.keys & ['category_id', 'sub_category_id']).present?
if params[:category_id].present?
@category = Category.active.find params[:category_id]
else
@category = Category.active.find params[:sub_category_id] if params[:sub_category_id].present?
end
end
@root_categories = Category.active.roots
@sub_categories = @category.children.active if params[:category_id].present?
@sub_categories ||= {}
@wanted_equipments = WantedEquipment.Approved.filter(params.slice(:category_id, :sub_category_id)).order("created_at desc").page(params[:page]).per(per_page_items)
end
def fetch_sub_categories
category = Category.active.where(id: params[:category_id].to_i).first
sub_categories = category.present? ? category.children.active : []
render json: sub_categories, status: 200
end
コントローラを次のように私は、コントローラのメソッドを持っていますファイル
<%= form_tag filter_wanted_equipments_path, :method => 'get' do %>
<%= select_tag "category_id", options_from_collection_for_select(@categories, "id", "name", params[:category_id]), :prompt=>"Select Category", id: "search_category" %>
<%= select_tag "sub_category_id", options_from_collection_for_select(@sub_categories, "id", "name", params[:sub_category_id]), :prompt=>"Sub-Category" %>
<%= hidden_field_tag('category_id', params[:category_id]) if params[:category_id].present? %>
<%= hidden_field_tag('sub_category_id', params[:sub_category_id]) if params[:sub_category_id].present? %>
<%= submit_tag "filter-", :name => nil, style: "display:none;", id: 'filter-submit' %>
<% end %>
routes.rbをファイル
resources :wanted_equipments do
get "/fetch_sub_categories" => 'wanted_equipments#fetch_sub_categories'
collection do
get 'search'
get 'filter'
end
end