Question

我有一个提取到部分表格的表格。

<%= form_with url: filtered_tags_path, class: 'filter-box' do %>
  <%= text_field_tag(:filter_by, '', id: 'filter-text-field', autocomplete: 'off') %>
<% end %>
<script>watch_form()</script>

application.js中有一个脚本，用于监视文本字段中的更改并在每次按键后触发请求：

function watch_form() {
  document.getElementById('filter-text-field').addEventListener('keyup', function(){
    Rails.fire(this.form, 'submit')
  })
}

对应动作如下：

def create
  @labels = Label.by_search_term(params[:filter_by])
  respond_to do |format|
    format.js
  end
end

使用此模板：

document.querySelector('.filter-results')
        .innerHTML = "<%= escape_javascript(render partial: 'filtered_results') %>"

哪个渲染：

<% if @labels.present? %>
  <% @labels.each do |label| %>
    <%= label_link(name: label.name, is_remote: true) %>
  <% end %>
<% else %>
  <div class="badge no-tags-badge">No tags found</div>
<% end %>

简而言之，呈现了一系列按钮（包装在表单中）。例如：

<form class="button_to" method="post" action="/issues?labels%5B%5D=ready" data-remote="true">
  <input class="label-badge" type="submit" value="＋ ready">
  <input type="hidden" name="authenticity_token" value="yvWh51r/xHqLPb5V/qdfeiar/j9fqd/8FoZM0jnRFUFEHkdU5WlgVjyaIQi9viiiSfckjJypOhMnKAh29wjY3w==">
</form>

当我单击一个按钮时，它发送请求并得到成功的响应。

我想有两种不同的形式。我的第一步是将表单文本字段的id替换为变量。

<%= form_with url: filtered_tags_path, class: 'filter-box' do %>
  <%= text_field_tag(:filter_by, '', id: filter_field_id, autocomplete: 'off') %>
<% end %>
<script>watch_form()</script>

像这样将其传递给部分对象：

<div class="filter-form">
  <%= render partial: 'filter_form', locals: { filter_field_id: 'filter-text-field' } %>
</div>

该窗体的行为与以前完全相同。为每个击键呈现按钮。除了真实性令牌外，示例按钮看起来完全相同。

<form class="button_to" method="post" action="/issues?labels%5B%5D=ready" data-remote="true">
  <input class="label-badge" type="submit" value="＋ ready">
  <input type="hidden" name="authenticity_token" value="0xjeK53JZSF0nSA2kUT2MREgaCeQ8RlmK2wqcd2sCIZd8ziYIl/BDcM6v2vSXYHpfnyylFPx/Ikawm7VE3XFGA==">
</form>

没有什么可以暗示有什么不同之处，但是这次，单击按钮时，我收到了500响应。

在控制台中，我看到：

rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1:212

POST http://localhost:3000/issues?labels%5B%5D=documentation&labels%5B%5D=ready 500 (Internal Server Error)

Rails.ajax  @ rails-ujs.self-d109d…a5343.js?body=1:212
Rails.handleRemote  @ rails-ujs.self-d109d…a5343.js?body=1:568
(anonymous) @ rails-ujs.self-d109d…a5343.js?body=1:169

现在，我完全迷路了。我尝试将我的JavaScript绑定到turbolinks:load事件监听器上，但这并没有改变。

我唯一能想到的是它与真实性令牌有关。

传递字符串文字作为id和使用变量之间有什么区别？为什么我的零钱会破坏事情？我需要做些什么才能使其正常工作？

更新

我发现，除了更改输入时呈现的按钮之外，单击页面上任何类似的按钮都将导致500响应。

更新2

Rails控制台中的错误：

ActionView::Template::Error (undefined local variable or method `filter_field_id' for #<#<Class:0x00007fa891909b60>:0x00007fa88bf7ef78>
Did you mean?  file_field):
    1: <%= form_with url: filtered_tags_path, class: 'filter-box' do %>
    2:   <%= text_field_tag(:filter_by, '', id: filter_field_id, autocomplete: 'off') %>
    3: <% end %>
    4: <script>watch_form()</script>

app/views/issues/_filter_form.html.erb:2:in `block in _app_views_issues__filter_form_html_erb___4066184210884757332_70181011505480'
app/views/issues/_filter_form.html.erb:1:in `_app_views_issues__filter_form_html_erb___4066184210884757332_70181011505480'
app/views/issues/create.js.erb:14:in `_app_views_issues_create_js_erb__4388147431667736133_70180939735900'

由此可见，在create.js.erb中渲染局部变量时，没有传递局部变量。所以我将其修改为：

document.querySelector('.filter-form')
        .innerHTML = "<%= escape_javascript(render 'filter_form', locals: { :filter_field_id=> 'filter-text-field' }) %>"

但是我仍然遇到相同的错误。 undefined local variable or method 'filter_field_id'

Answer 1

当您不使用partial时，传递局部变量是不同的。您的locals中不需要create.js.erb file。

请参阅：https://api.rubyonrails.org/classes/ActionView/PartialRenderer.html#class-ActionView::PartialRenderer-label-Rendering+the+default+case

# Instead of <%= render partial: "account", locals: { account: @buyer } %>
<%= render "account", account: @buyer %>

因此您的代码应为：

document.querySelector('.filter-form')
        .innerHTML = "<%= escape_javascript(render 'filter_form', filter_field_id: 'filter-text-field' ) %>"

或

document.querySelector('.filter-form')
        .innerHTML = "<%= escape_javascript(render partial: 'filter_form', locals: { filter_field_id: 'filter-text-field' }) %>"

Rails 5：为什么在部分ID的输入中使用变量设置输入时却得到500响应，而在使用字符串文字时却没有呢？

1 个答案: