7

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
4

2 に答える 2

9

多くのパラメーターを避けたい場合は、コントローラーで 3 つの異なるアクション (各タブに 1 つずつ) を作成するだけで、それぞれが js に応答します。次に、ビュー内の各アクションに対して [action].js.erb を次のように作成します。

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

実際には ajax リクエストを介してサーバーと通信する必要がありますが、onclick 関数はその部分をプリロードし、リモートには何もありません。

于 2013-03-29T00:44:19.083 に答える
0

3 つの異なるタブに対して 3 つの条件を持つコントローラーにアクションを記述します。任意のタブをクリックして ajax を呼び出し、「tab1」または「tab2」または「tab3」などの ID パラメーターと、必要に応じて必要なパラメーターを渡します。コントローラーで、パラメーターを取得し、実際のビジネス ロジックを含むモデル関数を呼び出します。

コントローラーで結果を取得し、js.erb を使用して 3 つのタブすべての下の div で部分的にレンダリングするだけです

于 2013-03-29T05:43:46.783 に答える