Dynamically render view in a partial with Rails and jQuery

Question

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".

I want to make it so that the content in the div below renders a partial based on which tab is selected.

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.

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.

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?")%>");
        });
    });

Users Controller: app > 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 partials corresponding to the three tabs, and I need the jQuery to somehow dynamically change the partial being called based on the selected tab.

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.

Update ------

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:

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

rails_has_elegance · Accepted Answer · 2013-03-29 00:44:19Z

9

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

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

You actually need to communicate with the server through a ajax request, whereas your onclick function would preload that partial and you don't have anything remote anymore.

answered Mar 29, 2013 at 0:44

rails_has_elegance

1,7324 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zephyr4434 Over a year ago

Sorry if this is really basic, but let me see if I understand what you're saying: 1) Create 3 separate actions in the controller 2) Change the paths in the link_to tags 2) Put that above code in the [action].js.erb files stored within the app>views>users directory? Do I need to write anything additional to handle the ajax request you mentioned?

rails_has_elegance Over a year ago

i think those 3 steps should do it :) Remote: true is important and a respond_to format.js in each action.

Zephyr4434 Over a year ago

I did exactly this, but when I click on one of the tabs, the empty div is not filled in with the partial I am trying to call. Strange.

Zephyr4434 Over a year ago

No errors in the log - If you see what I added to my question, it seems like the partial was rendered, but nothing actually happened on the page. I can't figure out why this is.

Zephyr4434 Over a year ago

YES! Sorry for such a dumb mistake but I was trying to target $('#tab_content') when it should have been $('#tab-content'). I got it working, thanks for your help!

Kushal · Accepted Answer · 2013-03-29 05:43:46Z

0

write an action in a controller having three conditions for 3 different tabs. call ajax by clicking on any tab, pass identity parameter say 'tab1' or 'tab2' or 'tab3' and also required parameters if you need. in controller, get parameters and call model function which contains actual business logic.

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

answered Mar 29, 2013 at 5:43

Kushal

2183 silver badges12 bronze badges

Collectives™ on Stack Overflow

Dynamically render view in a partial with Rails and jQuery

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related