rails 3使用jQuery动态选择字段

时间:2011-11-19 19:00:25

标签: javascript jquery ruby-on-rails

在动态列表https://github.com/sandeepleo11/Dynamic-Select-Menus-in-Rails-3上使用此示例我设法在我添加汽车的表单中进行动态选择,因此当我在下一个选择字段中选择车名时,我只获得属于汽车的车型我选择,以这种形式工作正常。

所以我决定在我的搜索表单中得到这个东西,你选择一辆汽车并根据你选择汽车模型并获得结果。这是一个搜索表单http://ec2-107-22-183-238.compute-1.amazonaws.com/cars的网站。

这里的问题是当我选择一辆车时,我在控制台中得到ActionController::RoutingError (No route matches "/dynamic_search/6"):,6意味着我选择了一个名为6的车名,而carmodels的选择字段显示了所有可用的车型。

这里是我搜索表单和动态搜索的一些代码:

_search.html.erb

    <%= form_for @search do |f| %>
    <%= f.label :carname_id_equals, "Select Car Make" %>
    <%= f.collection_select :carname_id_equals, Carname.order('name ASC').all,  :id, :name, :include_blank => 'All' %>
    <%= f.label :carmodel_id_equals, "Select Model" %>
    <%= f.collection_select :carmodel_id_equals, Carmodel.order('name ASC').all, :id, :name, :include_blank => 'All' %>
    <% end %>

dynamic_search.js.erb

$('#search_carmodel_id').empty();
<% for carmodel in @carmodels %>


   // alert(<%= carmodel.id %>);

      $('#search_carmodel_id').append($("<option></option>").attr("value",<%= carmodel.id %>).text('<%= carmodel.name %>'));


<% end %>

的routes.rb

post "dynamic_carmodels/:id" => "cars#dynamic_search"

控制器

def dynamic_search
    @carmodels = Carmodel.find_all_by_carname_id(params[:id])

    respond_to do |format|
      format.js
    end
  end

的application.js

jQuery(document).ready(function() {

//    jQuery('#search_carmodel_id_equals').html("<option value=''>Select Carmodel</option>");
    jQuery('#search_carname_id_equals').change(function() {

        var data=$('#search_carname_id_equals').val();
        $.ajax({

            type: "POST",
             url: "http://"+location.host+"/dynamic_search/"+data,
            data: data,

            beforeSend: function()
            {
                //      alert('hi');
                //$('#status').html('<img src="loading.gif">');

            },

            success: function(response)
            {
                 //  alert(response);
                //  $('#search_carmodel_id_equals').html(html);    //dynamic_search.js.erb
                   //      $('#status').html(html);


            }

        });
    });
});

1 个答案:

答案 0 :(得分:0)

<强>解决:

路线是问题所在:

post "dynamic_carmodels/:id" => "cars#dynamic_search"

应该是

post "dynamic_search/:id" => "cars#dynamic_search"

dynamic_search.js.erb

$('#search_carmodel_id_equals').empty();
<% for carmodel in @carmodels %>


   // alert(<%= carmodel.id %>);

      $('#search_carmodel_id_equals').append($("<option></option>").attr("value",<%= carmodel.id %>).text('<%= carmodel.name %>'));


<% end %>strong text