Rails asset pipeline: JavaScript being executed twice
asset-pipeline, javascript, ruby-on-rails, ruby-on-rails-3, turbolinks
Solution
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);
Problem
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`.