如何以红宝石形式使用onchange？

Question

我正在尝试构建一个交互式搜索页面，如果对搜索表单进行了任何更改而不刷新页面，它会更新搜索结果。我可以在不刷新的情况下显示结果，但我更改任何内容后仍需要单击搜索按钮。

我的看法：

<div class="row">
  <div class="col-md-2 col-md-offset-5">

    <%= form_for(:search, url: search_path, remote: true) do |f| %>

      <%= f.label :course_name %>
      <%= f.text_field :course_name, class: 'form-control bottom_margin', onchange: f.submit %>

      <%= f.label "Subject" %>
      <%= collection_select(:search, :subject_id, Subject.all.order(:name), :subject_id, :name, :prompt => true, onchange: f.submit)  %>

      <%= f.submit "Search", class: "btn btn-primary top_margin" %>
    <% end %>
  </div>

</div>
<div id="result">
</div> 

我的控制器：

class SearchController < ApplicationController
  def new
  end
  def create
    @course = search_params[:course_name]
    @subject = search_params[:subject_id]
    if @subject == ""
      @searchResults = Course.all
    else
      @searchResults = Subject.find_by(subject_id: @subject).courses
    end

    @searchResults = @searchResults.where("name LIKE ?", "%#{@course}%")
    respond_to do |search|
      search.js {render layout: false}
    end
  end
  private
    def search_params
      params.require(:search).permit(:course_name, :subject_id)
    end
end

我的 JavaScript：

$("#result").html("<%= escape_javascript(render partial: 'search/create', locals: { searchResult: @searchResult } ) %>");

为什么更改不起作用？

Answer 1

对，我检查了文档：https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select，看起来您需要将onchange 作为html_options 哈希的一部分传递，即：

collection_select(:search, :subject_id, Subject.all.order(:name), :subject_id, :name, :prompt => true, { onchange: "document.getElementById('search-form-id').submit();" })

onchange 事件是客户端，所以你不能写 onchange: f.submit

想看看它是否有效？

Answer 2

您正在混合服务器端的进程，以及在客户端的浏览器中运行的 javascript 代码。

首先，在 HTML 中的 onchange 下，f.submit 将评估为提交按钮，而不是属于 onchange 属性的 javascript 代码。

如果您从浏览器中查看页面源代码，您将看到 onchange 属性：

<input class="form-control bottom_margin" onchange="<input type=&quot;submit&quot; name=&quot;commit&quot; value=&quot;Save Search&quot; data-disable-with=&quot;Save Search&quot; />" type="text" name="search[course_name]" id="search_course_name" />

当onchange 事件发生时，这需要 javascript 代码来执行您想要发生的事情。

此外，您将以下字符串放入 <div id="result"> 标记中：

<%= escape_javascript(render partial: 'search/create', locals: { searchResult: @searchResult } ) %>

这只会将该字符串放在div 标记中。它不会评估render partial。您将拥有的只是 div 标记中未评估的文本。

这是因为render 必须在页面呈现之前在服务器上进行评估。 javascript 稍后运行，因此它无法评估您给它的字符串。