Rails 3 UJS - controller gets called twice by link

Question

I have a weird problem where JQuery is creating two AJAX requests for a link_to method. I am developing a Rails 3 app with JQuery for UJS. I have a toggle link which toggles between 'Follow' and 'Unfollow'

My link is rendered as below:

<span id="follow_link">
  <a href="/tfollow_artist?id=8103103" data-method="post" data-remote="true" id="follow_artist" rel="nofollow">Unfollow</a>
</span>

and my controller is setup so:

def tfollow_artist
  @artist = Artist.find(params[:id])
  if current_user.following?(@artist) 
    current_user.stop_following(@artist)
  else 
    current_user.follow(@artist)
  end
 end

which finally renders a js as:

 $('#follow_link').html('<%= escape_javascript(render :partial => "follow") %>');

Which essentially replaces html contents of the '<span id="follow_link">...</span> with the same URL only with the text being different. For example, above will now be rendered as:

<span id="follow_link">
  <a href="/tfollow_artist?id=8103103" data-method="post" data-remote="true" id="follow_artist" rel="nofollow">Follow</a>
</span>

However this is somehow causing JQuery to make two AJAX requests.

Can any one see what is wrong here?

I am using 'jquery-rails' gem which is copying the latest jquery-ujs file to my app. JQuery version is 1.4.3

Answer 1

Building on Eugene's answer, note that if you're developing after you've locally precompiled your assets for production, like...

bundle exec rake assets:precompile RAILS_ENV=production

...then as you continue development the Rails AssetPipeline will want to serve both your uncompiled and your compiled assets.

One way to fix it is with Eugene's Rails' standard rake task. Another way is by simply removing those pesky precompiled production-ready assets with something like

$ rm -rf #{Rails.root}/public/assets

Answer 2

Try this code.... to prevent double clicks on remote links..

$('a[data-remote=true]').live('ajax:before', function () {
   if ($(this).attr('ajax-loading')) {
     return false;
   } else {
     $(this).attr('ajax-loading', true);
   }
}).live('ajax:complete', function () {
  $(this).removeAttr('ajax-loading');
});

Gist

Answer 3

Thanks to this dialog:

https://github.com/rails/jquery-ujs/issues/208

I was able to discover that jquery and jquery_ujs were getting included twice.

I guess the jquery-rails gem automatically puts them into application.js, and then I had them included in application.js as well.

Seems like for whatever reason application.js automatically bundles everything in app/assets/javascripts/ - even when I remove all the requires.

So, if your :remote => true forms are getting submitted twice, try checking application.js.

Hope this helps!

UPDATE: I believe this might have had something to do with me pre-rendering my assets without using a digest, so then when my development environment adds script tags in the html head dynamically from the requires in app/assets/application.js, it also adds one for what should be an empty dynamic application.js, except the static one from public/assets gets loaded. Confusing? Yep!

Answer 4

JavaScript files you want as :defaults (application.js is always included).

 config.action_view.javascript_expansions[:defaults] = %w(jquery rails)

Commented line is clearly saying that application.js is always included. In my application I have added application in defaults. So for ajax .submit it was creating two records in my application.

Answer 5

I was having the same issue: duplicate requests when using :remote => true. My issue was due to using Heroku and precompiling assets. I am precompiling assets prior to deploying to Heroku (rake assets:precompile). This essentially creates a duplicate copy of your asset pipeline in your public folder. So the same thing was happening as mentioned by Docunext: there were multiple javascript files handling each request.

It gets fixed if I remove the assets in the public directory when working locally (git rm -rf public/assets). After removing the assets from the public directory, it stopped sending multiple requests

Answer 6

i faced the same problem just now. checked out all the code changes and tried other things but to no avail. finally cleared the browser cache. that helped.