Question

I am new to Ruby on Rails and i am working through a few example applications in the O’Reilly Head First Rails book. In one of the examples there is a page made up of three partials. The middle partial is a list of items. There is a link right below this section that, when clicked, should refresh the div containing that partial. The book is running examples based off of Rails 2.3 i believe and i am using Rails 3.1. This is the example that the book is giving me:

routes.rb:

map.connect '/flights/:flight_id/seats', :action=>'flight_seats', :controller=>'seats'

seats_controller.rb:

def flight_seats
    @flight = Flight.find(params[:flight_id])
    render :partial => "flights/seat_list", :locals => {:seats => @flight.seats}
end

show.html.erb:

<div id="seats">
    <%= render :partial=>"seat_list". :locals=>{:seats=>@flight.seats} %>
</div>

<$= link_to_remote("Refresh Seats", :url=>"/flights/#{@flight.id}/seats", method=>"get", :update=>"seats") %>

This example is also using prototype.js since that’s what Rails 2.3 came with built in. Rails 3 has jQuery as the default JavaScript library. (not sure if that makes a big difference)

Here is what i have so far. This is getting the contents of the partial correctly, it’s just not updating the “seats” div after the AJAX call gets the partial. My code:

routes.rb:

match 'flights/:flight_id/seats' => 'seats#flights_seats'

seats_controller.rb:

def flights_seats
    @flight = Flight.find(params[:flight_id])

    render :partial => "flights/seat_list", :locals => { :seats => @flight.seats }
end

show.html.erb:

<div id="seats">
    <%= render :partial => 'seat_list', :locals => { :seats => @flight.seats } %>
</div>

<%= link_to "Refresh Seats", "/flights/#{@flight.id}/seats", :remote => true %>

Any idea why my <div id="seats"> won’t refresh with the updated partial? I’m betting there is but i’ll ask anyway, is something wrong with my code?

Answer 1

The :remote => true option is a bit weird if you aren’t returning JSON data. You can wrap your HTML in a JSON object, though, which is what I typically do. Or if you want something closer to your existing code something like this should work for you:

<%= link_to "Refresh Seats", "/flights/#{@flight.id}/seats", :class => "refresh-seats" %>

In your javascript somewhere:

$(document).delegate(".refresh-seats", "click", function(e){
  e.preventDefault();
  $("#seats").load(this.href);
});