Click Button to Add to field_tag rails jQuery

Question

I'm not sure if jQuery would be needed for this but was in need of some assistance. I am wanting to add the id of a selected field to my form's input field tag. May be easier to explain with some code below:

Here is my form:

<%= 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 %>

So in the text_field_tag, currently I'm inputting id's manually by separating them with spaces, i.e: 1, 2, 3, 4

The index is displayed as below:

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

I would like people to be able to click the 'Add to Batch' button and the id of that item gets added to the text_field_tag in the form above. I created an add_to_batch.js file in my javascript assets. In it I have below:

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

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

This results in nothing happening, not even a javascript error in the console. Relatively new to jQuery use so any assistance is appreciated.

Sovalina · Accepted Answer · 2019-03-13 22:16:06Z

As you iterate over a collection, it could be easier to create a new action where item.id is passed as parameter, to make js call simpler:

I'm assuming your model and controller are Item and ItemsController
First in routes.rb, define a new path like:

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

Then in controller, add the action responding to js format:

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

Now in your views> items folder, add a new file add_batch.js.erb:

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

Finally in your index, pass the "add_to_batch" path to the link_to with the item.id as params:

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

It should work this way.

Collectives™ on Stack Overflow

Click Button to Add to field_tag rails jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related