Rails asset pipeline - add only jquery to head - javascript

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?

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.

Related

Rails 5 JavaScript asset pipeline issue

I'm trying to load some JavaScript in my rails application like so:
Application.html.erb (in the head)
<%= javascript_include_tag 'application' %>
Application.html.erb (before end of HTML)
<script>
$(document).ready(function() {
notie.alert(1, "It Works", 2);
});
</script>
Application.js
//= require rails-ujs
//= require turbolinks
//= require theme/jquery
//= require theme/bootstrap
//= require theme/select2
//= require theme/notie
//= require theme/plugins
//= require theme/app
//= require_tree .
With this set up, I'm getting the following errors:
TypeError: document.body is null
TypeError: notie is undefined
It seems to me that the error may be because of turbolinks and how the JS is loaded with the asset pipeline but for the life of me I can't figure out where it's going wrong. Any help is appreciated.
The problem seems to be that your Javascript is calling for a <body> tag before it exists in the DOM. That's why you're getting the error:
TypeError: document.body is null
For Javascript like that it's best to load it at the bottom of the page instead of the Head.

Rails app does not load a specific JavaScript file

I currently try to port this template from startbootstrap.com into my rails app. Most of it already works but the navigation bar does not change its color while scrolling.
The different colors are achieved by the creative.js file. I put this file under assets/javascript and included as in my application.js file:
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I inspected the assets with the Chrome Developer Tools and the creative.js file does not appear there. Since the other javascript files appear in the asset folder the asset pipeline seems to be working.
What do I have to change so that the creative.js file appears in my assets too?
I faced the same issue with my project where I tried to incorporate Bootstrap's creative theme.
The issue for me was that creative.js was not included at the right position (if you notice in the original theme the JS script calls are made at the end of the HTML file, after all the class and id declarations).
Your order of inclusion inside application.js is correct =>
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
However, there is a good chance that application.js is not included at the right spot. Ensure that you are including the files after the below code segment has ended =>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
Best of luck!
Try to delete the coffee file with the same name.
In your case creative.coffee
It worked for me!

Rails production: javascript not working

Recently I've got strange error on Rails production - some javascripts not working. Locally there is no problem - everything works perfectly, but production.
my application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require jquery.minicolors
//= require widget
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
//= require_tree .
scripts that not working - jquery.minicolors and widget(coffescript).
I've tried to add these scripts to
config.assets.precompile += %w( widget.js.coffee jquery.minicolors.js )
in production.rb, but that's doesn't work too
It's strange but if I remove
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
from application.js the rest scripts work fine
I understand this issue has been closed but I actually had the same issue recently. I fixed it by wrapping my jQuery code inside the following;
$(document).ready(
(custom JS goes here)
)
If you (or anyone in the future) has the same issue, I'd say it's cause of how Rails loads CSS/HTML and jQuery. Apparently jQuery is loaded as the head in a Rails app so it's loaded but can't be accessed after it's been loaded.
I've found a solution with help of question
I removed from application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
and keep only
//= require highcharts/highstock
highstock.js keeps in /vendor/assets/javascripts and contains necessary scripts for highcharts working

Loading javascript file from rails 4 asset pipeline

I'm trying to get a jquery plugin (geocomplete) to work and am having an issue with my rails asset pipeline.
To get the plugin to work, I need to load a .js file called jquery.geocomplete.js located in my /vendor/assets/javascripts/ directory
In my application.js file I include jquery.geocomplete
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery.turbolinks
//= require jquery.geocomplete
//= require jquery.geocomplete.min
//= require underscore
//= require gmaps/google
//= require_tree .
When I load my app in development mode, I can see in the source code that the following asset has been loaded:
<script data-turbolinks-track="true" src="/assets/jquery.geocomplete.js?body=1"></script>
However, the plugin requiring does not work. To get it to work I have to paste:
<script src="/assets/jquery.geocomplete.js"></script>
into my relevant view. (This then causes issues when I run in production mode in Heroku)
Can anyone tell me why the myjquery.geocomplete.js file will not run my plugin when I load it through the asset pipeline?
Any thoughts/ideas appreciated.

rails 3 does not render jquery properly

i have https://github.com/tkrotoff/jquery-simplecolorpicker-rails and i have tried https://github.com/tkrotoff/jquery-simplecolorpicker in plain HTML and the plain HTML worked.
I had swapped the code from the HTML to the one in rails but all my jquery functions does not work at all.
The file colorselect.js
$(function(){
$('#print_colorpaper').simplecolorpicker();
});
colorpaper.html.erb
<%= f.select(:colorpaper, Print::MY_COLORS, :selected => '#fbd75b') %>
the only thing i see in rails is the drop down menu which should be transformed into a palette as i see here: http://www.taqisystems.com/fiddle/
my application.js
//= require jquery
//= require jquery_ujs
//= require jquery.simplecolorpicker.js
//= require jquery.multi-select.js
//= require twitter/bootstrap
//= require_tree .
html source of the select:
<select id="print_colorpaper" name="print[colorpaper]"><option value="#7bd148">green</option>
I have it working using the following:
Try change in your app/assets/javascripts/application.js
jQuery(document).ready(function(){
jQuery('#print_colorpaper').simplecolorpicker();
});

Categories

Resources