Why is Rails UJS ajax:success bind being called twice?

Question

I have a simple form:

= form_for(posts_path, :id => "new_post", :remote => true) do
  = text_field_tag "post[input]"
  = submit_tag "Post!"

I have bound a callback to the ajax:success event:

$("form#new_post").bind("ajax:success", function(xhr, data, status){
  alert("Post Created!");
});

When I click the Post! button, the Post Created comes up twice. Why?

I'm using Rails 3.1 which by default is using jquery-ujs.

Edmon

Answer 1

That is because your page is loading jquery_ujs code twice in development mode when precompiled assets exist in /public/assets.

In development mode javascript requries are loaded with separate tags: jquery, jquery_ujs.js, myscripts.js and finally applications.js. The problem happens when precompiled application.js exists and is used from /public/assets - it contains compilation of all previous files. This is triggered by assets:precompile rake task.

The solution is to remove /public/assets directory on development then application.js is used (from /app/assets/javascript) which doesn't include previous files. Generally doesn't use assets:precompile rake task on development.

Update

Adding config.serve_static_assets = false to development.rb also solves problem for me without worrying about /public/assets.

Comp

Answer 2

A similar thing happened to me upgrading an application from Rails 3.0 to 3.1, it was my mistake. In your

app/assets/javascripts/application.js

check that your are not calling twice the rails helpers, i have troubles using

//= require_tree .

i have removed this and just left

//= require jquery
//= require jquery_ujs
//= require myscripts

i deleted too app/assets/javascripts/rails.js, the file was generated by jquery-rails gem but this is no longer necessary

Overreact

I have the same problem, and my javascript assets aren't being included twice. ajax:success is still called twice, even without the require_tree directive active. – Glossator

Thanks. I had the same problem. Removing require_tree helped solve the issue. – Unburden

Answer 3

For me the gotcha was the

config.assets.debug = true

option.

Diagnostics

what do you mean? I'm having this problem and also have this line in my development.rb. Should I remove it? – Overpraise

Actually I found it with the "try and error" approach because I saw in Firebug, that the javascript was loaded twice and therefore the binding was made twice (which resulted in the redundant ajax call). Anyway, I suspect it was because I precompiled the assets locally (because of the deploy to heroku) in combination with the debug = true. Anyway, When I've set the config.assets.debug = false it was no longer included twice. – Diagnostics

Thanks for the response. It turns out that my problem was also that the script loaded twice. I was moving around dom elements, which caused my script to re-run. I fixed it by running the script after the window.onload event fired. – Overpraise