Как использовать 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

Вы смешиваете какие процессы на стороне сервера и код javascript, который запускается в браузере на клиенте.

Сначала, под onchange в вашем HTML, f.submit оценивается каккнопка отправки, а не код javascript, который принадлежит атрибуту onchange.

Если вы выполняете просмотр страницы источника из браузера, вы увидите это для атрибута 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 запускается позже, поэтому он не может оценить строку, которую вы ему дали.

Answer 2

Хорошо, я проверил документы: 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

Хотите посмотреть, работает ли оно?