RailsとjQueryで部分的にビューを動的にレンダリングする

Question

私のアプリでは、3つのタブとその下の空白のdivを持つユーザープロフィールページがあります。デフォルトのタブは白で、他の2つのタブは暗く「選択されていません」です。

下のdivの内容が、どのタブが選択されているかに基づいて部分的にレンダリングするようにしたいと考えています。

jQueryを使用して別のタブをクリックできるようになり、ページを更新しなくてもタブの色が変わります。

しかし、私はパーシャルを正しくレンダリングする方法に固執しています。これについての考えは？私は、どのタブがjQueryで選択されているかに基づいて動的に部分的に呼び出す方法につきまして、実際に動作させるためにこれとやりとりするために別のファイルが必要かどうかは分かりません。私はレールアプリでjQueryに比較的新しいので、私が必要とするすべてを行ったかどうかはわかりません。

ユーザーのプロフィールページ：アプリ>ビュー> 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：アプリ>資産> JavaScriptの> 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 .rb

class UsersController < ApplicationController 

def show 
    @user = User.find(params[:id]) 
end 

def userprofile 
    respond_to do |format| 
     format.js 
    end 
end 
end 

3つの部分に対応する部分が3つありますjQueryは選択されたタブに基づいて呼び出された部分をどうにか動的に変更します。

私は本当にこれにいくつかの助けに感謝したい、または私の質問に答えることができる別のリソースがある場合。私は何をしようとしているかに直接答える何かを見つけることができませんでした。

更新------

私は、ソリューション提供rails_has_eleganceを使用しますが、何も私がターゲットにしていますdiv要素に表示されていません。しかし、私は私が欲しいものをやっているように思えるレールサーバ出力、でこれを見ています：

Started GET "https://stackoverflow.com/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

あなたは多くのパラメータを避けたい場合は、ちょうどあなたのコントローラで3つの異なるアクション、のための1つを作ります各タブはそれぞれがjsに応答します。そして、このような何かを持つビュー内のアクションごとに[アクション] .js.erbを作成：あなたのonclickの機能は、その部分をプリロードしまうのに対し、

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

あなたが実際にAJAXリクエストを介してサーバと通信する必要があるともう遠いものはもうありません。

Answer 2

3つの異なるタブに対して3つの条件を持つコントローラにアクションを書き込みます。 任意のタブをクリックしてajaxを呼び出すと、 'tab1'または 'tab2'または 'tab3'というIDパラメータと必要な場合は必須パラメータを渡します。コントローラ内の は、実際のビジネスロジックを含むパラメータとコールモデル関​​数を取得します。

コントローラをもたらし、これは本当に基本的なものですが、私はあなたが言っているのか理解していれば、私は見てみましょう場合だけで申し訳ありませんjs.erb