title: Dynamically render view in a partial with Rails and jQuery
body: <p>In my app, I have a user profile page that has three tabs and a blank div below it. There is a default tab that is white and two other tabs that are darker and "unselected".</p>
  
  <p>I want to make it so that the content in the div below renders a partial based on which tab is selected.</p>
  
  <p>I already have it working to the point where jQuery allows me to click on the different tabs and it changes the colors of the tabs without a page refresh.</p>
  
  <p>However, I am stuck on how to get the partial to render correctly. Any thoughts on this? I am stuck on how to dynamically call a partial based on which tab is selected in the jQuery and actually am not sure if I need another file to interact with this to make it work. I am relatively new to jQuery in a rails app so I am not sure if I've done everything I need to.</p>
  
  <p>User profile page: app > views > show.html.erb</p>
  
  <pre><code>   &lt;ul class="profile-tabs"&gt;    
  
          &lt;%= link_to "&lt;li class=\"tab selected\"&gt;Tab 1&lt;/li&gt;".html_safe, userprofile_users_path, remote: true %&gt;
          &lt;%= link_to "&lt;li class=\"tab\"&gt;Tab 2&lt;/li&gt;".html_safe, userprofile_users_path, remote: true %&gt;
          &lt;%= link_to "&lt;li class=\"tab\"&gt;Tab 3&lt;/li&gt;".html_safe, userprofile_users_path, remote: true %&gt;
  
      &lt;/ul&gt;
  
  &lt;div id="profile-content"&gt;
  
  &lt;!--content goes here --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery: app > assets > javascripts > userprofile.js</p>
  
  <pre><code>$(function() {
          $("li.tab").click(function(e) {
            e.preventDefault();
            $("li.tab").removeClass("selected");
            $(this).addClass("selected");
            $("#profile-content").html("&lt;%= escape_javascript(render partial: 
  "How can I make this partial name be generated based on the value of the selected li?")%&gt;");
          });
      });
  </code></pre>
  
  <p>Users Controller: app > controllers > users_controller.rb</p>
  
  <pre><code>class UsersController &lt; ApplicationController
  
  def show
      @user = User.find(params[:id])
  end
  
  def userprofile
      respond_to do |format|
          format.js
      end
  end
  end
  </code></pre>
  
  <p>There are three partials corresponding to the three tabs, and I need the jQuery to somehow dynamically change the partial being called based on the selected tab.</p>
  
  <p>I'd really appreciate some help with this, or if there is another resource that can answer my question. I have not been able to find anything that directly answers what I am trying to do.</p>
  
  <p>Update ------</p>
  
  <p>I used the solution provided rails_has_elegance but nothing is appearing in the div I am targeting. However, I am seeing this in the rails server output, which seems like it is doing what I want:</p>
  
  <pre><code>Started GET "/users/currentoffers" for 127.0.0.1 at 2013-03-28 21:20:01 -0500
  Processing by UsersController#currentoffers as JS
     Rendered users/_offers.html.erb (0.1ms)
     Rendered users/currentoffers.js.erb (0.8ms)
  Completed 200 OK in 4ms (Views: 3.7ms | ActiveRecord: 0.0ms)
  [2013-03-28 21:20:01] WARN  Could not determine content-length of response body. Set      content-length of the response or set Response#chunked = true
  </code></pre>