Как я могу изменить свою форму фильтра для использования AJAX?

Question

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

С помощью Railscasts Iдобавили возможность добавить отзыв к месту, используя AJAX.Как я могу использовать AJAXifying мою форму фильтра?

Пока у меня есть это:

контроллер мест

def index
  if
    @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas])
  else
    @venues = Venue.all
  end
end

индекс мест

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

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

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

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

Я пытался применить тот же метод, который использовался в jQuery railscast для добавления обзора с использованием AJAX, но есть слишком много peices, которые не подходят и думают, что я иду по неверному пути с этим, может кто-нибудь дать мне какие-нибудь указатели?

Большое спасибо за любую помощь.

Answer 1

Что касается HTML / JS, я бы порекомендовал использовать jQuery Form Plugin - есть много вариантов, но в вашем случае это может быть просто:

$('#filter_venues').ajaxForm({
    success: function() {/* ...load the response... */}
});

Что касается Rails, я бы сделал следующее (я делаю это в своем приложении, поэтому могу гарантировать, что это правильная установка):

Разделите вашу индексную страницу на шаблон и частичку, вот так:

index.html.erb:

<!-- ...filter form, some other stuff... -->
<table>
    <thead>
        <!-- all the attributes you feel like showing -->
    </thead>
<%= render :partial => 'index.ajax' -%>
</table>
<!-- more other stuff... -->

_index.ajax.erb:

<tbody id="venue-tbody">
<% @venues.each do |venue| -%>
    <tr>
        <!-- all the attributes you have headers for -->
    <tr>
<% end -%>
</tbody>

Затем измените действие index, чтобы оно отображало либо полную страницу (для запроса /venues.html), либо только частичную (для запроса /venues.ajax):

respond_to do |format|
    format.html {render :template => 'venues/index.html'}
    format.ajax {render :template => 'venues/_index.ajax', :layout => false}
end

Мне нужно было зарегистрировать свой собственный фиктивный тип MIME, чтобы заставить его работать (в config / environment.rb):

#Make a fake MIME type for AJAX calls:
Mime::Type.register 'application/x-ajax', :ajax

Более подробный пример JS для этой установки выглядел бы так (я думаю, что это должно быть полностью функционально. Я думаю.):

function load_new_venues(data, status, request)
{
    $('#venue-tbody').replaceWith(data);
    //Any event handlers that need to be set for the new HTML elements...
}

$('#filter_venues').ajaxForm({
    dataType: 'html',
    success: load_new_venues,
    url: '/venues.ajax'
});

Надеюсь, это поможет - и извините, если он превратился в небольшой роман ... Ура!