提交 <ul> 以Rails 4形式作为参数数组列出，使用JavaScript将参数值添加到参数哈希

Question

我有一个Rails 4表单，该表单在表单页面上使用AJAX生成零件列表。 在<ul>建立零件列表之后，我想将列表作为参数数组中参数值中的值数组提交。

我的表格：

<%= form_for ([@tool, @service]),:html => { :onSubmit => 'getParts' } do |f| %>
  <% if @service.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@service.errors.count, "error") %> prohibited this service from being saved:</h2>

      <ul>
      <% @service.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

   <div class="row">

    <div class="span4 offset1">

  <div class="form-inline">
    <%= f.hidden_field :tool_id , :value=>params[:tool_id] %>
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
 <br>
  <br>
  <div class="form-inline">
    <%= f.label :due_date %><br>
    <%= f.text_field :due_date, 'data-behaviour' => 'datepicker' %>
  </div>
 <br>
  <br>
  <div class="form-inline">
    <%= f.label :completed %><br>
    <%= f.text_field :completed, 'data-behaviour' => 'datepicker' %>
  </div>
 <br>
   <div class="field">
     <%= f.label 'Service Type:' %>
      <%= f.select :service_type_id, ServiceType.all.collect{|s| [s.name, s.id] }, {include_blank: false} %>
   </div>
   <br>

  </div>

 <div class="span7">
   <div class="form-inline">
     <div class="part_list_element">
     Parts Used <br>
     <%= text_field_tag :parts_used %>
     </div>
   </div>
   <br>

     Default Parts:
     <ul id="serv_parts_list">

     </ul>
   <br>
   <br>

    <div class="form-inline">
      <%= f.label :note %><br>
      <%= f.text_area :note %>
    </div>
   <br>
   <br>
    <div class="actions">
    <%= f.submit  %>
    </div>

 </div>
</div>

<% end %>

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

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

这将根据选择从数据库获取零件列表。 然后，它通过JS返回一个数组，然后将其附加到空的“默认零件”列表中：

  Default Parts:
     <ul id="serv_parts_list">

     </ul>

变为：

 <ul id="serv_parts_list">
     <li id="042511060272">042511060272 - Stihl/Denso Spark Plug W22mp-u<a class="service_parts">&lt;-Remove</a></li>
     <li id="795711145835">795711145835 - Bar Oil - Stihl<a class="service_parts">&lt;-Remove</a></li>
     <li id="795711478179">795711478179 - Stihl MS660/066 Air Filter<a class="service_parts">&lt;-Remove</a></li>
 </ul>

在我的application.js中，我有：

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

但这没有任何作用。 我一直在尝试找出如何将<ul>的<li>元素放入数组中并作为参数传递。 但是当前的参数哈希看起来像：

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调用获取默认部件列表，该默认部件列表将附加到<li> ，我认为这必须绑定到submit事件。 任何帮助表示赞赏。

Answer 1

我对此进行了深思，发现了一个简单得多的答案。 自从我从事这项工作已经很长时间了，所以我不得不回头再做，以刷新我的记忆。

基本上，我使用生成的Java脚本来插入默认部分，并将添加的所有部分作为复选框列表（已选中其复选框）添加。 这样，如果用户认为他们不需要默认零件之一，或者想要删除零件，则只需取消选中该框，该零件就不会与表单一起提交。 空的复选框列表以上面显示的形式开始，如下所示：

     Default Parts:<br>
        <div id="default_parts_list" class="checkbox inline">

        </div>
          <br>
     Other Parts:<br>
        <div id="parts_expended" class="checkbox inline">

        </div>
   <br>
   <br>

当服务类型的下拉菜单在表单上更改时，它会触发我在上面的问题中显示的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附加到表单中，如下所示：

<div id="default_parts_list" class="checkbox inline">

    <label for="service_part_ids_14">
       <input checked="checked" id="service_part_ids_14" name="service[part_ids][]" type="checkbox" value="14">Stihl/Denso Spark Plug W22mp-u 042511060272
    </label>

    <label for="service_part_ids_24">
        <input checked="checked" id="service_part_ids_24" name="service[part_ids][]" type="checkbox" value="24">Bar Oil - Stihl 795711145835
    </label>

    <label for="service_part_ids_10">
        <input checked="checked" id="service_part_ids_10" name="service[part_ids][]" type="checkbox" value="10">Stihl MS660/066 Air Filter 795711478179
    </label>

    <input name="service[part_ids][]" type="hidden" value="">
</div>

因此，它们只是普通的旧复选框，最终以表单提交，并最终以如下形式在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"}

当使用同一表格来编辑和退出服务时，必须使用其他表格，而不是上面的部分表格。 编辑表单如下所示：

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

<%= form_for ([@tool, @service]) do |f| %>
<% if @service.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@service.errors.count, "error") %> prohibited this service from being saved:</h2>

      <ul>
        <% @service.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
<% end %>

<div class="row">

  <div class="span4 offset1">

    <div class="form-inline">
      <%= f.hidden_field :tool_id , :value=>params[:tool_id] %>
      <%= f.label :name %><br>
      <%= f.text_field :name %>
    </div>
    <br>
    <br>
    <div class="form-inline">
      <%= f.label :due_date %><br>
      <%= f.text_field :due_date, 'data-behaviour' => 'datepicker' %>
    </div>
    <br>
    <br>
    <div class="form-inline">
      <%= f.label :completed %><br>
      <%= f.text_field :completed, 'data-behaviour' => 'datepicker' %>
    </div>
    <br>
    <div class="field">
      <%= f.label 'Service Type:' %>
      <%= f.select :service_type_id, ServiceType.all.collect{|s| [s.name, s.id] }, {include_blank: false} %>
    </div>
    <br>

  </div>

  <div class="span7">
    <div class="form-inline">
      <div class="part_list_element">
        Parts Used <br>
        <%= text_field_tag :parts_used %>
      </div>
    </div>
    <br>
    <strong class="alert-danger">Any parts that get unchecked here will be returned to inventory</strong><br>
    <b>Parts Used:</b> <br>
    <div id="parts_used_list" class="checkbox inline">

          <%= f.collection_check_boxes :part_ids, @service.parts, :id, :name %>


    </div>
    <br>
    <b>Other Parts:</b> <br>
    <div id="parts_expended" class="checkbox inline">

    </div>
    <br>
    <br>

    <div class="form-inline">
      <%= f.label :note %><br>
      <%= f.text_area :note %>
    </div>
    <br>
    <br>
    <div class="actions">
      <%= f.submit  %>
    </div>

  </div>
</div>

<% end %>

我希望这可以帮助任何人做类似的事情。 您可以在github上查看完整的源应用程序： github.com上的EquipDB

Answer 2

您必须记住，Rails并不关心HTMl，因此当您提到要发送“ <ul>列表作为参数”时，它与<ul>无关，但是如何将这些项目移植到Rails中

---

路线

最可靠的方法是使用路由，并将参数通过JS传递给它：

#config/routes.rb
post "your_route(/:items)", to: "controller#action"

#app/views/parts/index.html.erb
 <ul id="serv_parts_list">
     <li id="1">1</li>
     <li id="2">2</li>
     <li id="3">3</li> 
 </ul>
 <%= 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
       }
    });
});