【发布时间】：2023-03-12 00:20:01
【问题描述】：
我有一个 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 列表中：
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"><-Remove</a></li>
<li id="795711145835">795711145835 - Bar Oil - Stihl<a class="service_parts"><-Remove</a></li>
<li id="795711478179">795711478179 - Stihl MS660/066 Air Filter<a class="service_parts"><-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> 的默认部件列表，我认为这必须绑定到 @987654331 @ 事件。任何帮助表示赞赏。
【问题讨论】：
-
您介意分享您对此问题的解决方案吗？我现在也在经历同样的事情。
-
@seong-Lee 请参阅下面的答案。
标签： javascript jquery ruby-on-rails ruby