Активировать AJAX при поиске (гем pg_search)

У меня есть форма поиска, которая хорошо работает с гемом pg_search. Я в основном адаптировал его из Railscast #343.

Однако он всегда перезагружает страницу при поиске, что бы я ни пытался.

Я попытался добавить :remote => true в форму и поместить блок response_to в контроллер с помощью format.js. Я также попытался создать отдельный путь «/search» в маршрутах, которые возвращают только js, но моя страница всегда перезагружается с параметрами в URL-адресе.

Вот соответствующие фрагменты кода:

Форма:

  <div id="search_controls">
    <form class="form-inline">
      <div class="form-group">
        <%= form_tag discover_path, :method => 'get', id: "tapes_search" do %>
          <%= text_field_tag :query, params[:query], :autocomplete => :off, id: 'search_field', class: "form-control" %>
          <%= submit_tag "Search", :name => nil, id: 'search_submit', class: 'btn btn-default' %>
        <% end %>
      </div>
    </form>
  </div>
</div>

Контроллер:

def index
  if params[:query]
    @tapes = Tape.search(params[:query]).order("release_date DESC", :id).paginate(:page => params[:page], :per_page => 15)
  else
    @tapes = Tape.order("release_date DESC", :id).paginate(:page => params[:page], :per_page => 15)
  end
end

Модальный:

include PgSearch
pg_search_scope :search, against: [:album_name, :artist_name], 
    using: {tsearch: {dictionary: "english"}},
    ignoring: :accents

def self.text_search(query)
    search(query)
end

Маршрут

match '/discover', to: 'tapes#index', via: 'get'

Это, очевидно, без какой-либо функциональности ajax. Не мог бы кто-нибудь показать мне, что мне нужно сделать, чтобы параметры были отправлены незаметно, без перезагрузки страницы и срабатывания js в ответ?

Я использовал ajax на всем своем сайте, не знаю, что меня здесь держит :( Спасибо!


ruby ruby-on-rails jquery ajax pg-search
person Chris Butcher    schedule 12.02.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

:remote => опция true здесь вам не поможет и вообще не очень полезна, но это будет отдельная тема.

Как правило, вы можете справиться с этим:

  1. https://github.com/waymondo/turboboost -> довольно простые формы ajax в рельсах
  2. Используйте метод ajax в jquery. Пример: http://api.jquery.com/jquery.post/
  3. Используйте какой-нибудь js-фреймворк, например Ember или Angular, если вы создаете что-то большее.
person Piotr Karbownik    schedule 12.02.2015

arrow_upward
0
arrow_downward

Недавно я столкнулся с похожей проблемой, и мне пришлось написать вызов API AJAX с нуля, а не использовать remote => true:

jQuery(function() {
  $('form').submit(function(e) {
    var getData = $(this).serialize(); //grabs data from form input
    var formURL = $(this).attr('action'); 
    $.ajax({
      url: formURL,
      type: 'GET',
      data: getData,
      success: function(data, textStatus, jqXHR){
        $('search_controls').append(data); //this is the JS that gets triggered in response to a successful return. Data is what was returned.
      },
      error: function(jqXHR, textStatus, errorThrown){}
    });
    e.preventDefault();
  });
});

$(document).submit();
person trosborn    schedule 13.02.2015