Question

I’ve never programmed before and am having difficulty getting link_to to render the corresponding :partial in a users’ profile inside of my Rails 3 app. All in all there are three partials:

1. _profile_credits (I’m focusing on _profile_credits for the sake of this question.)
2. _profile_about
3. _profile_reviews

What I want to do is click the following:

<li><%= link_to "Credits", profile_credits_profile_path(:id => @profile.id), :remote => true %></li>

And have the following partial (_profile_credits) load and render each credit in @user.credits:

<% for credit in @user.credits %>
  <div class="credit">
  </div>
<% end %>

Where I’m trying to render the partial is beneath the links and inside of the div container. The HTML below shows the position of the links within the div and where I’d like the info from the partials to load:

<div id="tabs">
  <ul id="infoContainer">
    <li><%= link_to "Reviews", profile_reviews_profile_path(:id => @profile.id), :remote => true %></li>
    <li><%= link_to "About", profile_about_profile_path(:id => @profile.id), :remote => true %></li>
    <li><%= link_to "Credits", profile_credits_profile_path(:id => @profile.id), :remote => true %></li>
  </ul>
  <div id="tabs-1">
    ##load information from the partials inside `<div id="tabs-1">
  </div>
</div><!-- end tabs -->

And the rest of my code…

My profiles_controller#profile_credits action:

def profile_credits
  respond_to do |format|
    format.js { render :layout => false }
  end
end

In my routes.rb:

resources :profiles do
  get :profile_credits, :on => :member
end

My profile_credits.js.erb:

$( "#tabs" ).html( "<%= escape_javascript( render (:partial => "profile_credits", :locals => { :id => @profile.id } ) ) %>" );

At the moment nothing happens when I click a link. I’ve tried following the various Rails 3 UJS examples but can’t get it. At one point I specified more in the ProfilesController profile_credits action. However, if I was on someone else’s profile my credits were loading, not the credits of the user whose profile I was browsing. Can anyone help me figure this out?

Answer 1

I finally got this to work. Given a <div> that contains a <ul> navigation and a <div> for the loaded content, here is my code:

HTML for my container:

<div id="tabs">
  <ul id="infoContainer">
    <li><%= link_to "Reviews", profile_reviews_profile_path, :remote => true %></li>
    <li><%= link_to "About", profile_about_profile_path, :remote => true %></li>
    <li><%= link_to "Credits", profile_credits_profile_path, :remote => true %></li>
  </ul>
  <div id="tabs-1">
    <%= render :partial 'profile_reviews %> #default
  </div>
</div><!-- end tabs -->

_profile_credits.html.erb partial:

<% for credit in @user.credits %>
  <div class="credit">
  </div>
<% end %>

profile_credits.js.erb:

$( "#tabs-1" ).html( "<%= escape_javascript( render (:partial => "profile_credits" ) ) %>" );

profile_credits.rb controller:

def profile_credits
  @profile = Profile.find(params[:id])
  @user = User.find(@profile.user_id)
  @credits = User.find(@profile.id).credits
  respond_to do |format|
    format.html { render :layout => nil }
    format.xml
    format.js { render :layout => nil }
  end
end

That did it.