Как я могу изменить свою обычную форму фильтра с помощью отправки, чтобы использовать AJAX?

Question

У меня есть таблица мест.По умолчанию на странице указателей мест перечислены все записи места, и вы можете фильтровать их по областям и / или вводить, используя форму на той же странице с кнопкой отправки и перезагрузкой страницы.

Затем отображаются все найденные места и форма сбрасывается сама.

Как можно обновить список мест без перезагрузки страницы, просто щелкнув параметры фильтра «Разные»?Таким образом, нет кнопки отправки, и форма сохраняет свое измененное состояние.

Контроллер объектов

  def index
    if
      @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas]).order("average_rating DESC").all
    else
      @venues = Venue.all
    end
    @venues = @venues.paginate :per_page => 15, :page => params[:page]
  end

Объекты index.html.erb Это уже использует jQuery-UI, чтобы улучшить внешний вид флажков

<div class="filter_options_container">
  <%= form_tag '', :method => :get, :id => 'filter_form' do %>

    <fieldset class="filter_form_fieldset venuetypes">
      <% Venuetype.all.each do |v| %>
        <p class="venuetype_check"><%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %>
        <label for="venuetype-<%= v.id %>"><%= v.name %></label></p>
      <% end %>
    </fieldset>

    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
        <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p>
      <% end %>
    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
  <% end %>
</div>

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>
  <div class="clearall"></div>

  <div class="paginate_container">
    <div class="paginate">
      <%= will_paginate @venues %>
    </div>
  </div>
</div>

Большое спасибо за любую помощь, она очень ценится!

Answer 1

Вы, вероятно, хотите использовать jquery для этого.

Самым простым будет использование jquery для автоматической отправки формы при нажатии на фильтр, перезагрузка страницы все еще происходит, но посетителю не нужно нажимать кнопку отправки.

Код будет выглядеть примерно так:

$(".checkbox-which-send-form-when-clicked").change(function(e){
  $(this).parents("form:first").submit();
});

Пожалуйста, прочитайте документацию на сайте jquery

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

Answer 2

Так что я совсем не знаю Ruby, но знаю архитектуру, которую нужно реализовать с помощью jQuery.Сначала вам нужно настроить конечную точку, которая будет возвращать JSON клиенту.Когда пользователь создает, изменяет или просто отправляет форму фильтра, которую вы опубликуете или получите конечную точку JSON.Это ваш выбор, вы можете получить его, когда каждое поле изменяется пользователем или просто когда нажата кнопка отправки, это зависит только от вас, насколько интерактивным вы хотите сделать это.

Вы бы использовали jQueryФункции $ .ajax для получения JSON.Я рекомендую $ .post или $ .get для получения обновленных данных. jQuery AJAX Сокращенные функции

Вы также можете настроить обработчик события click для кнопки отправки формы.Это может выглядеть следующим образом, важно использовать e.preventDefault, потому что это предотвращает отправку всей страницы.

$ ("form: submit"). Click (function (e) {

e.preventDefault ();

$. GetJSON ([ваш URL AJAX], [данные из фильтра], функция (результат) {// обновить таблицу с помощью шаблонов});

});

В обратном вызове $ getJSON я рекомендую использовать шаблоны jQuery или некоторые другие шаблонные функции слияния, такие как микро-шаблоны Resig.

Я написал целый ряд постов в блоге, посвященных именно этому.такие вещи в ASP.NET.Для вас это должно неплохо перевести на Ruby, просто замените ASP.NET на серверную часть Ruby, и вы должны быть в пути.

My Thin ASP.NET Series