Question

I’m using the following code in a rails partial to place a call to a controller action upon expansion of an accordion element header:

<a> <%= link_to candidate[:title], :controller => :books, :controller=> :confirm_details, :remote => :true, :candidate => candidate  %></a>

<div id=<%= candidate[:asin].to_s %>>
</div>

This partial takes a collection of candidates and creates an accordion widget with an anchor as the accordion section header, each such header’s href pointing to the books controller action get_details. It also generates a div which has a unique ID for the candidate as it’s id attribute.

The get_details action is set up to grab the appropriate div based on that id number and populate its html with data pulled from the controller action.

The problem is that clicking on the anchor tag should both expand the accordion and place a call to the controller, however no http request is being generated. Is Jquery’s default behavior to suppress calls from such elements? Should I be using a different tactic? My original thought is that this is the best approach as it lets me use rails’ conventional ajax functionality 100%.

Thanks in advance.

Answer 1

What you could do is delegate the click event on those anchors to the accordion element and do whatever you need to place the call to the controller. This handler will be executed along with the default click handler of the accordion:

$( "#accordion" )
    .accordion()
    .on('click', 'h3 > a', function() {
        console.log(this.href);
    });​

DEMO