Нажмите кнопку, чтобы добавить в field_tag ​​рельсы jQuery

Question

Я не уверен, что jQuery понадобится для этого, но ему нужна была помощь. Я хочу добавить идентификатор выбранного поля в тег поля ввода моей формы. Может быть проще объяснить с помощью следующего кода:

Вот моя форма:

<%= 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 ​​в настоящее время я вводю идентификаторы вручную, разделяя их пробелами, т.е. 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>

Я бы хотел, чтобы люди могли нажимать кнопку «Добавить в пакет», а идентификатор этого элемента добавлялся к text_field_tag ​​в форме выше. Я создал файл add_to_batch.js в моих ресурсах JavaScript. В ней у меня ниже:

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

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

В результате ничего не происходит, даже ошибка javascript в консоли. Относительно новичок в использовании jQuery, поэтому любая помощь приветствуется.

Answer 1

Когда вы перебираете коллекцию, может быть проще создать новое действие, в котором item.id передается в качестве параметра, чтобы упростить вызов js:

Я предполагаю, что ваша модель и контроллер Item и ItemsController
Сначала в файле rout.rb определите новый путь, например:

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

Затем в контроллере добавьте действие, соответствующее формату js:

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>

Так должно работать.