QA@IT

Rails で jQuery UI の Tabs via Ajax を使う方法

1686 PV

※自己解決しました。
jQuery UI TabsがHTMLを読み込むようなので

respond_to do |format|
  format.html {render :json => @timeline.to_json }
end

とすれば必要なデータだけ渡すことができるようです。

自己解決した時にどうQA@ITでどう書くべきかわかりませんでしたので本文の編集をしました。

以下元の質問になります。

Rails4 で jquery-ui-rails を使い Tabsの表示をAjax形式で表示したいのですがうまく表示できていません。

まず Gemfile に
gem 'jquery-ui-rails' を追加して、指示に従い初期設定をおこない。
<%= javascript_include_tag "application" %>がフッターにあるとjQueryの読み込みエラーが起きるのでheadタグ内に移しました。

タブUI部分は以下のようにし

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><%= link_to "TL", "/#{@username}/#{@list}/timeline" %></li>
  </ul>
  <div id="tabs-1">
    <p>content1</p>
  </div>

route.rb で userのfooメソッドを呼び出して
get ':id/:list_id/timeline' => 'users#list_timeline'

users_controller.rb で

  def list_timeline
    @username = params[:id]
    @list = params[:list_id]
    @timeline
    begin
      @timeline = current_user.twitter.list_timeline(@username,@list) if current_user
    rescue
    end
  end

として list_timeline.html.erb に
<%= @timeline %>
と記述すると表示はされるのですが、@timeline の内容だけでなくヘッダーなども表示されてしまいます。

def list_timeline
   # (略)
   render :json => @timeline 
end

にするとjsonでResponseが返ってきてはいるのですが
どうすればTabの中に表示できるのかがわかりませんでした。

Ajaxやrenderの理解が曖昧なのがわからない原因だと思うのですが、
どなたかアドバイスをよろしくお願いします。

ウォッチ

この質問への回答やコメントをメールでお知らせします。