尝试在Rails应用程序上实现Ajax下拉菜单

Question

我正在尝试在Rails应用程序上实现Ajax下拉菜单。 当我选择类别时，子类别下拉列表应根据所选类别填充子类别。 当前，只有当我选择类别并输入“过滤器”并转到下一页时，子类别下拉列表才会填充。 我有如下的控制器方法：

调节器

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

这是js文件equipment.js

$(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();
  });

});

这是index.html.erb文件

<%= 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

Answer 1

http://blog.ashwani.co.in/new/2017/03/06/How-to-use-create-ajax-dropdown-from-database-models-in-Rails.html

码：

index.html.erb

<div> 
<%= f.collection_select :vertical, @verticals, :vertical, :vertical, {:prompt => "Select a Vertical"}, {:class => "dropdown_vertical btn btn-default dropdown-toggle"} %> 
<%= f.collection_select :subVertical, @subVerticals, :subVertical, :subVertical, {:prompt => "Select a Sub Vertical"}, {:class => "dropdown_subVertical btn btn-default dropdown-toggle"} %>
</div>

custom.js

$("#search_vertical").on('change', function(){ var listitems = []; $.ajax({ url: "populate_subVerticals", type: "GET", data: {vertical_name: $(this).val()}, success: function(data) { $("#search_subVertical").children().remove(); $("#search_subVertical").append('<option value=>' + "Select a Sub Vertical" + '</option>'); $.each(data,function(key, value) { listitems += '<option value="' + value.subVertical + '">' + value.subVertical + '</option>'; }); $("#search_subVertical").append(listitems); }  }) });

调节器

def populate_subVerticals vertical_name = params[:vertical_name] @verticals = Vertical.where(:vertical => vertical_name).select("id","subVertical").all respond_to do |format| format.json { render json: @verticals } end end

routes.rb文件

'populate_subVerticals', to: 'verticals#populate_subVerticals'

Answer 2

这是我用来填充动态下拉菜单的一段代码。

index.html.erb-> dd1_id是静态下拉列表，一旦选择了dd1_id，就会填充dd2_id下拉列表。

   <tr>
    <td class="td1"></td>
    <td class="td2"><span class="">Drop Down 1:</span></td>
    <td><%=f.select :dd1_id, options_for_select(@abc.collect { |abc| [abc.type_name.upcase, abc.type_name.upcase] }, 0), {prompt: "-- Select --"}, { id: 'dd_1_select',:style => "width:300px"} %></td>
  </tr>

  <tr>
    <td class="td1"></td>
    <td class="td2"><span class="">Drop Down 2:</span></td>
    <td><%=f.select :dd2_id, options_for_select([""]), {}, {:id => "dd_2_select",:style => "width:300px;"} %></td>
  </tr> 

device.js->它具有onchange函数，该函数检查是否使用值选择了dd1_id下拉列表，然后触发一个名为update_dd2的函数，该函数捕获dd1_id值，并在ajax请求中命中下面指定的url。

 $('#dd_1_select').on('change', function(){
   if ($("#dd_1_select option:selected").val() != ""){
    update_dd2();
    $('#dd_2_select').val('');
   } 
 });

 function update_dd2() {
    $.ajax({
        url: '/update_dd_2',
        data: {
            dd1_value: $("#dd_1_select option:selected").val()
        },
        method: 'GET',
        dataType: 'script',
        beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},

        success: function(){
            console.log("Dynamic dd_2 select OK!");
            $('#dd_2_select').prop('disabled',false);
        },
        failure: function(error){
            console.log("AJAX FAILURE: "+error);
            alert("Something went wrong, Please try again later.");
        },
        error: function(error){
            console.log("AJAX ERROR: "+error);
            alert("Oops! there was an error, Please reload the page and try again.");
        }
    });
}

}

路由.rb->在ajax请求中指定的URL将被重定向到一个动作

    get "update_dd_2" => "abc#update_dd_2", :as => "update_dd_2"

控制器/操作->基于从第一个下拉列表中选择的值，它获取填充第二个下拉列表所需的数据

    def update_dd_2
      @values = SomeTable.where("id in (?)", params[:dd1_value])
      respond_to do |type|
        type.js
      end
    end

dd1_value.js->以上操作将在视图中出现一个.js文件，这将对html文件做出部分响应，并且将在下拉列表中填充适当的值

    $("#dd_2_select").empty().append("<%= escape_javascript(render(:partial => @values )) %>");