Question

I’m trying to do a simple AJAX request using link_to :remote option and display the response dynamically. The problem is that I get 5 responses instead of one. Why this might be happening?

page.html.erb:

<%= link_to item.title, item_path(item, :format => :js), :remote => true %>

show.js.erb:

$("<%= escape_javascript render(:file => 'items/show.html.erb') %>").insertAfter('#sortable');
$('#show_item').slideDown();

items_controller.rb:

def show
        @item = Item.find(params[:id])
        respond_to do |format|
            format.html
            format.js
        end
    end

Update: I’m using jQuery. Gemset includes Devise, paperclip and simple_form. I’m having also similar problem when using :confirm with link_to. The thing is that this confirmation dialog is then displayed 5 times regardless of what you press.

There is only one item with ‘sortable’ id in the generated html:

<ul id="sortable"> 
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="/items/10.js" data-remote="true">Another item</a></li> 
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="/items/9.js" data-remote="true">test</a></li> 
     </ul> 

Answer 1

You got this problem with different links, right?

Your link handler has been registered multiple times (you can easily check that by using firebug in firefox or the developer tools in chrome, just click the link and look up how many requests are getting sent up, or console.log the handler)

This can happen if you register remote links dynamically (after an asynchronous page fragment load, for instance) and the easiest fix is then to mark your link as registered (for example, by adding a class ‘registered’) and not register those again, like this

# Link registration
$('a.my_link:not(.registered)').click(function(e) {
  #your code here
}).addClass('registered');

If you have not yourself written any click event handlers in jQuery, check for libraries doing that for you. Look for something like:

$(document).ajaxComplete(function() {
  $('a[data-remote="true"]').click(function() {
    #some code here...
  });
});