How can I change my regular filter form using a submit, to use AJAX?

I h开发者_运维技巧ave a table of venues. The venues index page by default lists all the venue records and lets you filter them by area and or type using a form on the same page with a submit button and a page reload.

All the venues found are then displayed and the form resets itself.

How can I go about having the list of venues update without a page reload just by clicking on the differant filter options? So theres no submit button and the form keeps its altered state.

The venues controller

  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

The venues index.html.erb This is already using jQuery-UI to get better looking checkboxes

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

Thanks very much for any help its much appreciated!

You probably want to use jquery to do that.

The simplest will be to use jquery to automatically send the form when a filter is clicked, there is still a page reload but the visitor do not have to click on the submit button.

The code will be something like :

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

Please read documentation on jquery website

Another solution which will not make the page reloaded each time a checkbox is clicked is to use Ajax request to send the form and get the result. A good tutorial could be found here

So I don't know Ruby at all, but I know the architeccture you need to implement using jQuery. First you need to setup an endpoint that will return JSON to the client. When a user creates, modifies or just plain submits the filter form you will post or get the JSON endpoint. Its your option, you can retrieve it as each field is changed by the user or just when the submit button is clicked, it is entirely up to you how interactive you want to make it.

You would use the jQuery $.ajax functions to retrieve the JSON. I reccomend either the $.post or $.get to retrieve the updated data.jQuery AJAX Shorthand functions

You can also setup a click event handler for your form submit button. It might look like this, it is important to use the e.preventDefault because this keeps the entire page from posting back.

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

e.preventDefault();

$.getJSON([your AJAX url], [data from filter], function(result){ //update table using templates });

});

In the $getJSON callback I reccomend using the jQuery templates or some other templating merge functionality like Resig's micro templates.

I wrote a whole series of blog posts on doing exactly this sort of thing in ASP.NET. It should translate pretty well for you to Ruby, just replace the ASP.NET stuff with your Ruby server-side and you should be on your way.

My Thin ASP.NET Series