Question

As you know, when you upgrade from Rails 2 to 3 you replace this:

link_to_remote "more", :url => {...}

with this:

link_to "more", {...}, :remote => true

But how do you handle the :update option in link_to_remote? In Railscast #205 Ryan Bates demonstrates link_to with :remote and a server response that includes JavaScript code to update a particular element in a page, but this practice seems wrong to me. I want my server’s response to be a simple HTML fragment which is easy to test and which can be used by different pages (clients) in different ways. I don’t think the server should have to know the ID of the target element on the requesting page as it ties the action to the page (a mini-client) and therefore makes it less general (it also feels uglier than a pure HTML response).

So, to be explicit, is there a way to do something like this:

link_to_remote "more", :url => {...}, :update => "products-list"

with Rails 3 and UJS? Or do I have to write JavaScript to capture the server’s HTML response and insert it into the right element on the page?

If the latter, please describe the best approach (can link_to‘s :remote option be used at all?).

Answer 1

I’m not 100% sure that this is the Rails-endorsed way to do it, but I’ve found a solution that works and seems pretty clean. Let’s say we have a page that lists the ten most popular products in our database. At the end is a link to load all remaining products via AJAX:

<ul id="products-list">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>
<%= link_to "more...", "/products/all", :id => "load-more", :remote => true %>

The server returns plain HTML (so that the link can be used on many different pages and is not bound to particular DOM IDs). We use the ajax:x events triggered by the Rails UJS drivers (here I’m using jQuery) to grab the server’s response and insert it into the right element on the page:

<%= javascript_tag do %>
  $("#load-more").bind("ajax:complete", function(et, e){
    $("#products-list").html(e.responseText);
  });
<% end %>

If desired, we can also use the ajax:loading event to show a “spinner”:

<%= javascript_tag do %>
  $("load-more").bind("ajax:loading", function(et, e){
    $(this).hide();
    $("#products-spinner").show();
  });
<% end %>

The Rails UJS drivers trigger four other events as well: ajax:success, ajax:failure, ajax:before, and ajax:after. See the driver included in your app (public/javascripts/rails.js) for more information.