Question

Say I have a list of users in the left column, generated by <%= current_user.clients %> and the second column is empty by default.

However, when the user clicks on one of the links, the second column becomes populated with the projects associated with that user – without the entire page being reloaded (i.e. using AJAX).

I would also like to continue the process, so when they click on a project from that user, the third column is populated with other things (e.g. the name of images, etc.).

How do I accomplish this in Rails?

Answer 1

I assume you are using Rails 3 and jQuery (I’m not well-versed in prototype). It’s easy to switch jQuery for prototype in Rails 3: https://github.com/rails/jquery-ujs

For the link:

<a href="#" class="first_column_link" data-client-id="<%= client.id %>">Something</a>

Using JavaScript and jQuery, write a function that sucks in links of class first_column_link (please rename to something more reasonable, by the way):

$(function() {
  $('.first_column_link').bind('click', function() {
    $.getJSON('/clients/' + $(this).attr('data-client-id'), function(data) {
      // Populate the second column using the response in data
    });
  });
});

This doesn’t work on browsers that don’t support or have otherwise disabled JavaScript. Gracefully degrading would likely be a good idea, but without more context, I can’t advise you how to best do it.