时间戳

首页 > 解决方案 > 单击按钮添加到 field_tag rails jQuery

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

问题描述

我不确定是否需要 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 资产中创建了一个 add_to_batch.js 文件。在其中我有以下内容：

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

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

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

标签： javascriptjqueryruby-on-rails

解决方案

当您遍历一个集合时，创建一个item.id作为参数传递的新操作可能会更容易，以使 js 调用更简单：

我假设您的模型和控制器是Item并且ItemsController
首先在 routes.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 %>)
}

link_to最后在您的索引中，使用as 参数将“add_to_batch”路径传递给item.id：

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

它应该以这种方式工作。

推荐阅读