javascript - 单击按钮添加到 field_tag rails jQuery

Question

我不确定这是否需要 jQuery，但需要一些帮助。我想将所选字段的 ID 添加到我的表单的输入字段标签中。用下面的一些代码可能更容易解释:

这是我的表格:

<%= form_tag(create_batch_path, multipart: true, class: 'form', role: 'form', method: 'POST') do %>
  <div class='form-row'>
    <div class="form-group col-md-8">
      **<%= text_field_tag 'ids', nil, class:'form-control', placeholder: 'Enter IDs You Would Like Cleared (Separate by comma), or click Add to Batch Below', id: 'inputIDfield' %>**
    </div>
    <div class="form-group col-md-4">
      <%= button_tag 'Upload File', class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>

所以在 text_field_tag 中，目前我通过用空格分隔它们来手动输入 id，即:1、2、3、4

索引显示如下:

<div id='item-table'>
  <table class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th class="th-sm">ID
        </th>
        <th class='th-sm'>Add to Batch
        </th>
      </tr>
    </thead>
    <tbody>
      <% @items.each do |item| %>
        <tr>
          <td id='item-id'><%= item.id %></td>
          <td><%= button_tag 'Add to Batch', id: 'addtoBatchbutton', remote: true, class: 'btn btn-primary' %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

我希望人们能够单击“添加到批处理”按钮，并且该项目的 ID 被添加到上面表单中的 text_field_tag。我在我的 javascript Assets 中创建了一个 add_to_batch.js 文件。我在其中有以下内容:

$(document).ready(function(){
  $('#addtoBatchbutton').click(function () {
    var id = $("item-id").val()

    $('#inputIDfield').append(id)
  })
})

这不会导致任何事情发生，甚至不会在控制台中出现 javascript 错误。 jQuery 使用相对较新，因此非常感谢您的帮助。

Answer 1

当你遍历一个集合时，创建一个新的 Action 会更容易，其中 item.id 作为参数传递，使 js 调用更简单:

我假设您的模型和 Controller 是 Item 和 ItemsController
首先在 routes.rb 中定义一个新路径，例如:

get 'add_to_batch', to: 'items#add_batch'

然后在controller中，添加响应js格式的action:

def add_batch
  @id = params[:id]
  respond_to do |format|
    format.js
  end
end

现在在你的 views> items 文件夹中，添加一个新文件 add_batch.js.erb:

var firstVal = $('#inputIDfield').val()
if (firstVal === '') {
  $('#inputIDfield').val(<%= j @id %>)
} else {
  $('#inputIDfield').val($('#inputIDfield').val() + ', ' + <%= j @id %>)
}

最后在您的索引中，将“add_to_batch”路径传递给 link_to，并将 item.id 作为参数:

<td><%= link_to 'Add to Batch', add_to_batch_path(id: item.id), remote: true, class: 'btn btn-primary' %></td>

它应该以这种方式工作。