动态选择集合中带有ajax的rails

时间:2015-12-29 14:30:48

标签: jquery ruby-on-rails ajax

我是动态菜单,我尝试使用grouped_collection_select

<%= f.grouped_collection_select :unit_id, Project.visible.order(:position), :units, :name, :id, :full_name, include_blank: true, class: 'items' %>

但是我不需要显示所有:units我只需要使用Unit.visible这样的东西,经过多次尝试和搜索后我决定忽略这种情况并使用ajax但是有些东西使我的代码不起作用,这是我的代码

--[ Models ]--------------------------------------------    

        class Customer < ActiveRecord::Base
            has_many   :activities
        end     

        class Activity < ActiveRecord::Base
            belongs_to :customer
            belongs_to :project
            belongs_to :unit
        end

        class Project < ActiveRecord::Base
            has_many   :units,      dependent: :destroy 
            has_many   :activities
        end

        class Unit < ActiveRecord::Base
            belongs_to :project
            has_many   :activities
        end
--------------------------------------------------------        

---[ Controller ]---------------------------------------    

class UnitsController < ApplicationController
  def get_units
    @project = Project.find params[:project_id]
    @units   = @project.units
  end
end
--------------------------------------------------------    

---[ View ]-(new activity)------------------------------
  <%= nested_form_for(@customer, remote: true) do |f| %>
    <div class="nested">
        <% f.fields_for :activities do |activity| %>
            <%= render "activity_call_fields", f: activity %>
        <% end %>

        <p><%= f.link_to_add "Add activity", :activities %></p>
    </div>
  <% end %> 

---(activity_call_fields)-(this is partial)---------------
<div id="id_dynamic_select">
  <%= f.collection_select :project_id, Project.all, :id, :name, include_blank: true, class: 'project_selection' %>
  <%= f.collection_select :unit_id,    Unit.all,    :id, :name, include_blank: true, class: 'unit_selection' %> 
</div>
----------------------------------------------------------

---[ javascript ]---------------------------------------
<script type="text/javascript">
    $(document).ready ->
      $("#id_dynamic_select select:nth-child(1)").on "change", ->
        $.ajax
          url: "/units/get_units"
          type: "GET"
          dataType: "script"
          data:
            project_id: $("#id_dynamic_select select:nth-child(1) option:selected").val()

</script>
---(this is partial)-----------------------------------
    $('#id_dynamic_select select:nth-child(2)').empty();
    $('#id_dynamic_select select:nth-child(2)').append( $('<option>Select the unit</option>'));
    <% @units.each do |unit| %>
      $('#id_dynamic_select select:nth-child(2)').append($('<option value="<%= unit.id %>"><%= unit.full_name %></option>'));
    <% end %>
--------------------------------------------------------

---[ route ]--------------------------------------------
resources :units do
    collection do    
      get 'get_units', to: "units#get_units"
    end
  end
--------------------------------------------------------

我尝试使用类.project_selection.unit_selection,但我没有在源页面中看到它id="customer_activities_attributes_1451397090634_project_id"

2 个答案:

答案 0 :(得分:0)

要解决此问题,请使用第一个方案grouped_collection_select,如果您需要使用Unit.visible这样的内容,请转到您的模型class Project < ActiveRecord::Base并定义方法以返回您需要显示的内容< / p>

# ===[ Methods ]==============
  def visible_units
    self.units.visible # visible is scope
  end
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
在您的视图中

编写此代码,这与我合作

<%= f.grouped_collection_select :unit_id, Project.visible.order(:position), :visible_units, :name, :id, :full_name, { :include_blank => true }, { :class=> "select_unit_id" } %>

答案 1 :(得分:0)

当您使用remote:true时,表单将自动通过ajax提交。所以你不需要自己编写ajax。你需要的是处理ajax:成功ajax:错误事件:

form-for doc