Dynamically render a partial view with Rails and jQuery

Question

In my application, I have a user profile page that has three tabs and an empty div below it. There is a default tab, which is white, and two other tabs that are darker and not selected.

I want to make the content in the div below display partial based on the selected tab.

I'm already working on the fact that jQuery allows me to click on different tabs and change the colors of the tabs without refreshing the page.

However, I went in cycles on how to receive partial visualization correctly. Any thoughts on this? I am fixated on how to dynamically invoke a partial, based on which a tab is selected in jQuery, and in fact I'm not sure if I need another file to interact with this to make it work. I'm relatively new to jQuery in a rails application, so I'm not sure I did everything I need.

User profile page: app> views> show.html.erb

<ul class="profile-tabs"> <%= link_to "<li class=\"tab selected\">Tab 1</li>".html_safe, userprofile_users_path, remote: true %> <%= link_to "<li class=\"tab\">Tab 2</li>".html_safe, userprofile_users_path, remote: true %> <%= link_to "<li class=\"tab\">Tab 3</li>".html_safe, userprofile_users_path, remote: true %> </ul> <div id="profile-content"> <!--content goes here --> </div> 

jQuery: app> assets> javascripts> userprofile.js

 $(function() { $("li.tab").click(function(e) { e.preventDefault(); $("li.tab").removeClass("selected"); $(this).addClass("selected"); $("#profile-content").html("<%= escape_javascript(render partial: "How can I make this partial name be generated based on the value of the selected li?")%>"); }); }); 

User controller: application> controllers> users_controller.rb

 class UsersController < ApplicationController def show @user = User.find(params[:id]) end def userprofile respond_to do |format| format.js end end end 

There are three partial elements corresponding to the three tabs, and I need jQuery to somehow dynamically change the partial call based on the selected tab.

I would really appreciate help in this, or if there is another resource that can answer my question. I could not find anything that directly answers what I'm trying to do.

Update ------

I used the provided rails_has_elegance solution, but nothing is displayed in the div I'm aiming for. However, I see this in the output of the rails server, which seems to do what I want:

 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 

Answer 1

If you want to avoid a lot of parameters, just do 3 different actions in the controller, one for each tab, each of which corresponds to js. Then create [action] .js.erb for each action in views something like this:

 $("#tab_content").html("<%= escape_javascript(render('tab1')) %>"); 

You really need to communicate with the server through an ajax request, while your onclick function will preload this partial one and you won't have anything else.

Answer 2

write an action in a controller that has three conditions for three different tabs. call ajax by clicking on any tab, pass the identification parameter "tab1" or "tab2" or "tab3", as well as the necessary parameters, if you need to. in the controller, get the parameters and function of the call model, which contains the actual business logic.

get the result in the controller and just partial in the div below all 3 tabs using js.erb