Rails asset pipeline: JavaScript being executed twice

Question

My JavaScript is being executed twice. When I run the Chrome debugger, I noticed that the individual JavaScript file will execute the code the first time, then after that, the application.js file will execute the code again.

I believe this is happening because I recently turned precompile off because I was having issues with Heroku. After this I ran rake assets:precompile.

score 11 · Answer 1 · answered Jul 08 '14 at 06:50

Turbolinks

You probably have an issue with Turbolinks (considering you've included it in your asset pipeline); although this might not be the problem.

Turbolinks is meant to speed up your page load times by loading the <body> tag of your new pages with ajax, keeping the <head> tag intact. This is meant to let your application load just the HTML it needs, but messes up the JS on your page.

If you're having your JS fired twice, it could be a sign that Turbolinks is interfering with your JS. Because you haven't included any examples from the logs, I won't be able to give you any specific information, but you should be able to test this by removing the turbolinks include from both your layout and your application manifest JS file:

#app/views/layouts/application.html.erb
= javascript_include_tag "application", "data-turbolinks-track" => false

#app/assets/javascripts/application.js
//= require turbolinks -> remove this line

If you do this, restart your server & reload the page in question. If it still comes back with the erroneous functionality, it means Turbolinks is not the problem (and you should reset all the things you changed)

--

Events

The other problem you might have is how you're calling / triggering your events. This could be down to a number of reasons, but you should definitely look at how you're calling your JS:

#app/assets/javascripts/application.js
$(document).on("click", ".element", function(){
    //your stuff here
});

We always delegate from the document element of the DOM now. Whilst this might cause some resource issues, we've found it makes Rails apps much more robust with the Asset Pipeline, as it allows you to truly identify elements on the page.

If you're trying to trigger an event from a single object on your DOM, you may find that JS will "capture" the event twice (for whatever reason), leading to your issue. Try delegating your events which are being called twice

--

Functions

Finally, your functions could be the issue.

If you have any anonymous functions, or functions for specific events, you will need to ensure they are able to be called correct. You should do this by using page events in JS & Turbolinks:

#app/assets/javascripts/application.js
var your_function = function() {
    //stuff here
};

$(document).on("page:load ready", your_function);

I am not using turbolinks, unless it is automatically included in rails 3.2.13 — user2158382, Jul 08 '14 at 18:48

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

I had this same problem on a rails 3 app that is not using turbolinks. I was able to fix it by running:

rake assets:clean

This link helped me: Jquery Rails 3... form submits twice... deletes twice... help

edited May 23 '17 at 12:02

Community

1
1

answered Nov 05 '15 at 12:20

Ross Fuhrman

638
4
13
26

score 1 · Answer 3 · answered Aug 06 '17 at 23:41

I experienced this issue because of the asset pipeline including both jquery, jquery-ujs, and rails-ujs:

//= require jquery
//= require jquery_ujs
//= require rails_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Removed rails_ujs and all was fine.

Rails asset pipeline: JavaScript being executed twice

3 Answers3