コントローラーを呼び出して展開時にアコーディオンアイテムを入力する

Question

JqueryとJqueryUIを使用するレール3アプリでは、アイテムのアコーディオンリストを表示するために部分的にレンダリングしています。適切なアコーディオンコンポーネントを展開したときに、そのアイテムについてのWebサービスを介して追加の詳細を取得するためにコントローラアクション（Item#get_detailsアクションと呼ぶ）を呼びたいと思います。

部分に渡されるアイテムのコレクションのような、説明およびアイテム番号を含む：

render :partial => 'candidates' , :collection => @candidates 
#Candidates is a list of hashes, each hash containing keys "Desc" and "id_number" 

各部分を通過し、以下のように、jqueryUIはアコーディオン部として描画マークアップをレンダリングする：

<h3><%= candidate[:desc] %> 
<div id="candidate_details"> 
</div> 

コントローラーコールを<h3>にバインドして、詳細を取得し、アコーディオンアイテムのアクティブ化時に「candidate_details」divを作成するベストプラクティスは何ですか？

ありがとうございます。

Answer 1

まず第一に、私はそれを閉じるだろう<h3>。

// Adjust these options to match your needs of course... 
$("#accordion").accordion({ 
    collapsible: true, 
    autoHeight: false, 
    active: false 
}); 

：あなたはすべてがあなたがアコーディオンをバインドするために、このようなものを使用したい閉じた状態でお使いのアコーディオンが出始めたいよう

<h3 data-id="<%= candidate[:id_number] %>"><%= candidate[:desc] %></h3> 
<div id="candidate_details"></div> 

サウンド：次にid_numberを保持するために<h3>上のデータ属性を使用します

collapsibleオプションを使用すると、すべてのパネルを一度に閉じることができます。autoHeight設定では、パネルの内容に合わせてパネルのサイズを変更することができ、activeの設定はすべて閉じられます。

次に、を使用して、クリックハンドラを<h3>にバインドして、最初にアクティブ化した後に自身を削除することができます。そのクリックハンドラはdata-id値を掘ると、対応する<div>のためのコンテンツを取得するために、AJAX呼び出しを行うことができます

$('#accordion').find('h3').one('click', function() { 
    var id = $(this).data('id'); 
    $(this).next().load('/some/path/' + id); 
}); 

次に、あなたのコントローラーが必要なコンテンツを検索し、少しとしてそれを送り返すためにidを使用しますHTMLの塊jQueryの-UI側の

デモ：このためhttp://jsfiddle.net/ambiguous/BhJYv/