如何使用紅寶石形式的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" />

這需要的是JavaScript代碼，以執行onchange事件發生時想要發生的事情。

此外，您將以下字符串放入<div id="result">標記中：

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

這只會將該字符串放入div標簽中。 它將不評估render partial 。 您將擁有的只是div標記中未經評估的文本。

這是因為render必須在渲染頁面之前在服務器上進行評估。 javascript稍后運行，因此無法評估您給它的字符串。