Question

In a rails 3 app using Jquery and JqueryUI, I’m rendering a partial to display an accordion list of Items. I wish to call a controller action (let’s call it the Item#get_details action) to retrieve additional details via a web service about the Item upon the expansion of the appropriate accordion component.

The collection of items passed into the partial contains a description and an item number, as such:

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

Each pass through the partial renders markup which jqueryUI renders as an accordion section, as below:

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

What is the best practice for binding a controller call to the <h3> which will retrieve details and populate the “candidate_details” div upon activation of the accordion item?

Thanks in advance.

Answer 1

First of all, I’d close that <h3>. Then use a data attribute on the <h3> to hold the id_number:

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

Sounds like you want your accordion to start out with everything closed so you’d use something like this to bind the accordion:

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

The collapsible option allows all the panels to be closed at once, the autoHeight setting allows the panels to resize to fit their content, and the active setting starts them all out closed.

Then, you could use one to bind a click handler to the <h3>s that will remove itself after its first activation. That click handler can dig out the data-id value and do an AJAX call to get the content for the corresponding <div>:

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

Then your controller would use the id to look up the necessary content and send it back as a little blob of HTML.

Demo of the jQuery-UI side: http://jsfiddle.net/ambiguous/BhJYv/