Rails asset pipeline - add only jquery to head

Question

I have couple of js files and I put them into vendor/assets/js. Then I require them in the application js file as;

//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.cookie
//= require toastr

//VENDOR JS BEGINS
//= require pace/pace.min
//JQuery buraya gelecek sonra
//= require modernizr.custom
//= require jquery-ui/jquery-ui.min
//= require boostrapv3/js/bootstrap.min
//= require jquery/jquery-easy
//= require jquery-unveil/jquery.unveil.min
//= require jquery-bez/jquery.bez.min
//= require jquery-ios-list/jquery.ioslist.min
//= require jquery-actual/jquery.actual.min
//= require jquery-scrollbar/jquery.scrollbar.min
//= require bootstrap-select2/select2.min
//= require switchery/js/switchery.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require jquery-isotope/isotope.pkgd.min
//= require classie/classie
//= require codrops-stepsform/js/stepsForm
//= require bootstrap-datepicker/js/bootstrap-datepicker
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.tr.js
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.en.js
//= require summernote/js/summernote.min
//= require moment/moment-with-locales.min
//= require bootstrap-daterangepicker/daterangepicker
//= require bootstrap-timepicker/bootstrap-timepicker.min
//= require codrops-dialogFx/dialogFx
//= require ion-slider/ion.rangeSlider.min
//= require owl-carousel/owl.carousel.min
//VENDOR JS ENDS

at the top of the page I require jquery and jquery_ujs belongs to jquery. Right now, I load the application js files as;

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>    

The thing is, I have couple of js codes inside ..html.erb files, which needs the page loads first. But I would like to merge them in a js file. What I would like to do is call only jquery in the head tag and call application js files in body. But if I remove jquery gem and call it as;

<%= javascript_include_tag 'jquery.min', 'data-turbolinks-track' => true %>    

Rails gives an error about jquery_ujs. Ofcourse I can add jquery_ujs there as well. But what is the best practise?

Answer 1

The most rails-esque way to add page specific js code to your rails app (thus avoiding loading js in every page when a library or script is only needed in one page) is to add to the very bottom of your layouts/application.html.erb file right before the closing body tag:

    <%= yield :javascript %>

  </body>
</html>

Then on the view that you're looking to run some snippets of javascript you should put this at the very bottom of it after all html tags have been closed. Make sure it's not within some divs or anything in that view but at the very bottom of it.

Updated referencing Fred:

<%= content_for :javascript do %>
  <script type="text/javascript">
   $(document).on('page:load', function() {
       all your code here..
     });
  </script>
<% end %>

This code will now be yielded to the bottom of your layout view only loading on the specific views you need instead of being concatenated along with all other assets in your assets/js folder. I do this with all custom js that isn't application wide and it's very easy to maintain/debug.