在Rails 4表单中将列表作为参数数组提交,使用javascript将params值添加到params hash

我有一个Rails 4表单,它在表单页面上使用AJAX构建部件列表。 一旦在

    构建了部件列表,我想将列表作为值数组提交到params散列中的参数中。

    我的表格:

      { :onSubmit => 'getParts' } do |f| %>  

    prohibited this service from being saved:

    params[:tool_id] %>



    'datepicker' %>



    'datepicker' %>


    Parts Used

    Default Parts:





    当用户从选择列表中选择默认服务时,此javascript将触发:

     $('#service_service_type_id').change(function() { var id = this.value; $.ajax ({ url:'/get_default_parts', type:"POST", data: { service_type: { id: id } } }); }); 

    这将根据选择从DB获取部件列表。 然后它通过JS返回一个数组,然后将其附加到空的默认部件列表:

      Default Parts: 

    变为:

      
    • 042511060272 - Stihl/Denso Spark Plug W22mp-u<-Remove
    • 795711145835 - Bar Oil - Stihl<-Remove
    • 795711478179 - Stihl MS660/066 Air Filter<-Remove

    在我的application.js中,我有:

     $(document).ready(function(){ $("#commit").click(function() { $("#expended_parts").val(('#serv_parts_list').text()); }); }); 

    但这没有做任何事情。 我一直试图弄清楚如何将

    • 元素放入一个数组并作为参数传递。 但是目前的params hash看起来像:

       Parameters: {"utf8"=>"✓", "authenticity_token"=>"s/....=", "service"=> {"tool_id"=>"113", "name"=>"test without hash", "due_date"=>"", "completed"=>"", "service_type_id"=>"2", "note"=>""}, "parts_used"=>"", "commit"=>"Create Service"} 

      由于部件列表可以在页面加载后多次更新,无论是从AJAX调用获取附加到

    • 的默认部件列表,我认为这必须绑定到submit事件。 任何帮助表示赞赏。

      我正在思考这一点,并找到了一个更容易的答案。 自从我为此工作已经很长时间了,所以我不得不重新开始工作以重温我的记忆。

      基本上我有构建的Javascript插入默认部分和任何添加的部分只是一个复选框列表已经检查过他们的框。 这样,如果用户决定他们不需要其中一个默认部件,或者想要删除部件,他们可以取消选中该框,并且不会随表单一起提交。 空复选框列表以上面显示的forms开头,如下所示:

        Default Parts:

      Other Parts:


      当在表单上更改服务类型的下拉列表时,它会触发上面问题中显示的javascript。 这将获取零件清单并将其交给这个JS:

       $("#default_parts_list").empty(); $("#default_parts_list").append('<%= escape_javascript(render :partial => 'get_default_parts' ) %>'); 

      因此,_get_default_parts部分呈现:

        <%= collection_check_boxes(:service, :part_ids, @parts_list, :id, :sku_name, {}, {checked: true}) do |b| %> <%= b.label { b.check_box + b.object.name + " " + b.object.sku} %> <% end %> 

      这会创建一个附加到表单的html,如下所示:

       

      因此,它们只是简单的旧复选框,最终与表单一起提交,最终以params哈希结尾:

       Parameters: {"utf8"=>"✓", "authenticity_token"=>"IHXcV0H8NnySxGIBXi8ZA=", "service"=>{"tool_id"=>"121", "name"=>"refresher", "due_date"=>"2014-12-27", "completed"=>"2014-12-27", "service_type_id"=>"2", "part_ids"=>["14", "24", "10", ""], "note"=>""}, "parts_used"=>"", "commit"=>"Create Service", "tool_id"=>"121"} 

      当使用相同的表单编辑和退出服务时,它必须使用不同的表单而不是上面的部分表单。 编辑表单如下所示:

       

      Editing service for <%=" #{@tool.category.name.singularize} / #{@tool.serial}" %>

      <%= form_for ([@tool, @service]) do |f| %> <% if @service.errors.any? %>

      <%= pluralize(@service.errors.count, "error") %> prohibited this service from being saved:

        <% @service.errors.full_messages.each do |msg| %>
      • <%= msg %>
      • <% end %>
      <% end %>
      <%= f.hidden_field :tool_id , :value=>params[:tool_id] %> <%= f.label :name %>
      <%= f.text_field :name %>


      <%= f.label :due_date %>
      <%= f.text_field :due_date, 'data-behaviour' => 'datepicker' %>


      <%= f.label :completed %>
      <%= f.text_field :completed, 'data-behaviour' => 'datepicker' %>

      <%= f.label 'Service Type:' %> <%= f.select :service_type_id, ServiceType.all.collect{|s| [s.name, s.id] }, {include_blank: false} %>

      Parts Used
      <%= text_field_tag :parts_used %>

      Any parts that get unchecked here will be returned to inventory
      Parts Used:
      <%= f.collection_check_boxes :part_ids, @service.parts, :id, :name %>

      Other Parts:


      <%= f.label :note %>
      <%= f.text_area :note %>


      <%= f.submit %>
      <% end %>

      我希望这有助于任何人做类似的事情。 您可以在github 上查看 github上的完整源代码: EquipDB

      你必须记住Rails并不关心HTMl,所以当你提到你想发送“

        list as params”时,它与

          无关,而是你如何将这些项移植到Rails中


          路线

          最强大的方法是使用路由,并通过JS将params传递给它:

           #config/routes.rb post "your_route(/:items)", to: "controller#action" #app/views/parts/index.html.erb 
          • 1
          • 2
          • 3
          <%= link_to "Submit", class: "submit_link" %> #app/assets/application.js.erb $("a.submit_link").on("click", function() { var data = jQuery('#serv_parts_list li').map(function(){ return 'id[]=' + this.id.match(/(\d+)$/)[1] }).get() $.ajax ({ url: "your_route", data: data.join('&') success: function(data) { //success }, error: function(data) { //error } }); });