提交< ul>以Rails 4形式作为参数数组列出，使用JavaScript将params值添加到params哈希中 [英] Submit <ul> list as parameter array in Rails 4 form, adding params values to params hash using javascript

问题描述

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

I have a Rails 4 form that builds a list of parts using AJAX on the form page. Once the list of parts is built in the <ul> I want to submit the list as an array of values in a parameter in the params hash.

我的表单:

<%= 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将触发:

When a user chooses a Default Service from the selection list, this javascript fires:

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

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

This gets a list of parts from the DB based on the selection. It then returns an array via JS that then gets appended to the empty Default Parts list:

  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>元素放入数组中并作为参数传递.但是当前的参数哈希看起来像:

But this doesn't do anything. I've been trying to figure out how to get the <li> elements in the <ul> into an array and passed as a param. But current params hash looks like:

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>，因此我认为这必须绑定到事件.任何帮助表示赞赏.

Since the list of parts can get updated multiple times after the page loads, either from an AJAX call to get the default parts list that gets appended to the <li>, I think this would have to be bound to the submit event. Any help is appreciated.

推荐答案

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

I was overthinking this and found a much easier answer. It has been a long time since I've worked on this so I've had to go back over my work to refresh my memory.

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

Basically I had the Javascript that builds inserts the default parts and any parts added as just a list of checkboxes with their boxes already checked. That way if the user decides they don't need one of the default parts, or want to remove a part they can just uncheck the box and it doesn't get submitted with the form. The empty checkbox lists start out in form shown above like this:

     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:

when the dropdown for the type of service is changed on the form it fires the javascript shown in my question above. This gets the parts list and hands it off to this JS:

$("#default_parts_list").empty();

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

将_get_default_parts部分渲染为:

which renders the _get_default_parts partial thus:

  <%= 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附加到这样的表单:

this creates html appended to the form like this:

<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哈希值出现:

So they are just plain old checkboxes that end up being submitted with the form and end up in the params hash like this:

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"}

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

When this same form is used to edit and exiting service it has to use a different form rather than the form partial above. The edit form looks like this:

<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

I hope this helps anyone doing something similar. You can view the full source app on github: EquipDB on github.com

这篇关于提交< ul>以Rails 4形式作为参数数组列出，使用JavaScript将params值添加到params哈希中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！