Question

我对rails和javascript很新。我有一个如下所示的表格，我正在尝试将项目ID和所选类别传递给更新item.id类别的ajax调用。

出了什么问题，我似乎无法将正确的it.id传递给ajax电话。它传递了第一个it.id而不是我选择的那一行。我有这个工作，但我做了很多清理其他代码，它不再有效。我想我刚刚第一次做了一件幸运的事，却不知道怎么做。

<table class="table table-hover">
<tbody>
<% @itemised.each do |it| %>
<tr>
<td><%= it.date %> </td>
    <td><%= it.item  %></td>
    <td><%= number_to_currency(it.value, :unit => "$") %></td>
<td><form name="myform" action="" method="POST">
<input type="button" name="button" value="Submit"   onClick="singleItem(this.form)" >
<select name="list">
  <% @array_of_live_categories.each do |cats|  %>
     <option> <%= cats %> </option>
         <% end %>
      ## <option> <%= it.id %> </option>
</select>
<input type= "hidden" id="id" name="id" value= "<%= it.id %>">

</form>
</td>

我正在使用以下javascript进行测试。

function singleItem (form) {
Cat_index = form.list.selectedIndex;
Cat = form.list.options[Cat_index].text;
Item_id = document.getElementById('id').value;
 console.log(Item_id) ;
 console.log(Cat) ;

$.ajax({
type: "POST",
url: '/items/single_categorise',
data: { id: Item_id, newcat: Cat},
});
}

我刚刚收录了##＆lt;％= it.id％＆gt;作为证明item.id存在的方法。

下面是源代码的一部分，还有很多内容，但从中可以看出传回的值看起来是正确的。但是，当运行singleItem函数时，它会传递一个不同的值（与表中第一个项相关联的值）。

</tr>
</tbody>
<tr>
<td>15/01/2015 </td>
<td>J P &amp; Y P Mahaffy</td>
<td>$1,500.00</td>


<td><form name="myform" action="" method="POST">
<input type="hidden" id="id" name="id" value= "J P &amp; Y P Mahaffy">
<input type="button" name="button" value="Submit" onClick="singleItem(this.form)" >
<select name="list">
<option> bank fees </option>
<option> cash out </option>
<option> vehicle expenses </option>
<option> health </option>
<option> office expenses </option>
<option> income </option>
<option> entertainment </option>
<option> transfer </option>
<option> ird payment </option>
<option> unsorted </option>
<option> regular payment </option>
<option> interest </option>
<option> user a </option>
## <option> J P &amp; Y P Mahaffy </option>
</select>

</form>
</td>

任何帮助都将不胜感激。

Harleigh

Answer 1

可能你应该使用Rails隐藏标签

<%= hidden_field_tag 'itemId', it.id %>

在你的javascript中

Item_id = document.getElementById('itemId').value;

希望这会对你有所帮助。

Answer 2

我似乎无法传递正确的it.id

那是因为您的select没有值：

<option>bank fees</option>
#-> should be -> <option value="...">bank fees</option>

此外，还有许多问题需要解决：

您应该始终使用Rails帮助程序来处理HTML元素（例如form_for等）

你应该保留你的JS unobtrusive

您需要确保正确构建表单

-

<table class="table table-hover">
  <tbody>
    <% @itemised.each do |it| %>
      <tr>
        <td><%= it.date %> </td>
        <td><%= it.item  %></td>
        <td><%= number_to_currency(it.value, :unit => "$") %></td>
        <%= content_tag :td do %>
          <%= form_tag "#", id: "category_form", data: { it-id: it.id } do %>
            <%= collection_select :list, :category_id, @array_of_live_categories, :first, :first, {}, id: "category_select" %>
            <%= submit_tag %>
          <% end %>
        <% end %>
      </tr>
    <% end %>
  </tbody> 
</table>

以上将允许您使用以下内容：

#app/assets/javascripts/application.js
$(document).on("submit", "form#category_form", function(e) {
  e.preventDefault(); 
  $id  = $(this).data("it-id");
  $cat = $(this).find("select#category_select").text();

  $.ajax({
    type: "POST",
    url: '/items/single_categorise',
    data: { id: $id, newcat: $cat},
  });
}

偏离主题，但您正在做的更简单的版本是使用data-remote框的select选项：

<%= collection_select :category, :id, Category.all, :id, :name, {}, {data: { remote: true, url: url_for(controller: :items, action: :single_categorise)}} %>

这将只显示一个选择框，您希望发送的id的{{1}}将从category发送到控制器。不幸的是，它不会发送params[:category][:id]

如何将隐藏的输入传递给JavaScript

2 个答案: