Я пытаюсь создать страницу интерактивного поиска, которая обновляет результат поиска, если в форму поиска вносятся какие-либо изменения без обновления страницы. Мне удалось показать результат без обновления, но мне все равно нужно нажать кнопку поиска после того, как я что-то изменил.

Мой вид:

<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 } ) %>");

Почему на сдаче не работает?

0
Terence Lyu 23 Окт 2018 в 22:49

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

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

0
kasperite 23 Окт 2018 в 20:10

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

0
Marlin Pierce 23 Окт 2018 в 20:12
52956826