Question

I’m super new to programming, I currently have a table of venues which can be filtered by type and/or area using a form with checkboxes on the index page.

With the help of railscasts I have added the ability to add a review to a venue using AJAX. How can I go about AJAXifying my filter form?

So far I have this:

venues controller

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

venues index

<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>

I’ve tried to apply the same method used in the jQuery railscast for adding a review using AJAX but theres too many peices which dont fit and think I’m heading down the wrong path with this, can anyone give me any pointers?

Thanks very much for any help.

Answer 1

For the HTML/JS side, I’d recommend using the jQuery Form Plugin – there are many options, but in your case it might be as simple as:

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

For the Rails side, I’d do the following (I do this in my app, so I can guarantee it’s a valid setup):

Split your index page into a template and a partial, like so:

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>

Then, change your index action so that it renders either the full page (for a /venues.html request), or only the partial (for a /venues.ajax request):

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

I needed to register my own dummy MIME type to get this to work (in config/environment.rb):

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

A more detailed JS example for this setup would look like so (I think this should be fully functional. I think.):

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'
});

Hope this helps – and sorry if it turned into a small novel… Cheers!