Ajax call on a <select> in a formtastic form

Question

I need in my app to select from a list of provider a provider, and then, via ajax, I could see below a list of categories, that belongs to a specific provider. I have a form in activeadmin:

<%= semantic_form_for [:admin, @game], builder: ActiveAdmin::FormBuilder do |f| %>
  <%= f.semantic_errors :state %>
    <%= f.inputs do %>
        <%= f.input :categorization_id, label: 'Provider', as: :select,
                    collection: Provider.all.map { |provider| ["#{provider.name}", provider.id] },
                    input_html: { class: (:provider_select), 'data-url': category_select_path(provider: 4) } %>
        <%= f.input :categorization_id, label: 'Category',input_html: { class: ('category_dropdown') }, as: :select,
                    collection: Category.all.map { |category| ["#{category.name}", category.id]}%>
        ...

    <% end %>
  <%= f.actions %>
<% end %>

In activeadmin controller I have:

controller do
  def ajax_call
      @provider = Provider.find(params[:provider])
      @categories = @provider.categories
      respond_to do |format|
        format.json { render json: @categories }
      end
    end
end

JS:

$(document).on('ready page:load', function () {

  $('.select.input.optional').last().addClass('hidden_row');

  $('#game_categorization_id').change(function () {
    var id_value = this.value;
    $('.hidden_row').removeClass('hidden_row');
    $.ajax({
      type: 'GET',
      url: '/admin/games/category_select'
      // data: id_value
    })
  });

});

And the routes: match '/admin/games/category_select' => 'admin/games#ajax_call', via: :get, as: 'category_select'

I don't have an idea, how can I pass providers id from collection into url. Currently, I have there category_select_path(provider: 4), but actually it has to be smth. like this - category_select_path(provider: provider.id) In the browser, in a Network tab of devtools I can see my category_select, but there is an error: Couldn't find Game with 'id'=category_select. I can't figure out from where does it come. Any suggestions? Thanks.

Answer 1

The problem was in routes: match '/admin/games/category_select' => 'admin/games#ajax_call', via: :get, as: 'category_select'. It is reserved by a show action of Activeadmin controller. So I changed my routes to: get '/admin/select_category' => 'admin/games#get_providers_categories', as: 'select_category', and added to ajax call data: {provider: provider}, so I could fire in params id of provider:

$.ajax({
      type: 'GET',
      url: '/admin/select_category',
      data: {
        provider: provider
      },
      success: (function (data) {
          $('#select_category').children('option').remove();
          $('#select_category').prepend('<option value=""></option>');
          $.each(data.categories, function () {
            $('#select_category').append('<option value="' + this.id + '">' + this.name + '</option>')
          })
      })
    })