I'm working on implementing jQuery into a rails project, and have this Javascript tag in the head of my application.html.erb file:
<%= javascript_include_tag "application" %>
And if I put jQuery code into my application.js file, it works as expected in my application. However, if I put the jQuery code into any other .js files in my assets/javascripts folder (home.js, for example), it doesn't work as it should in my application.
Here's my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
It was my impression that the last line of that meant that all my other js files would be compiled into application.js, so having just the <%= javascript_include_tag "application" %> in my application.html.erb file would be sufficient to make all my js files work -- is this a faulty assumption?
These are the contents of my home.js file -- this function works as it should when I put it into my application.js file directly but when it's in my home.js file instead it doesn't work.
$(document).ready(function(){
$("h2").click(function(){
$(this).hide();
});
});
Try to add //=my home in application.js file above //=require_tree .
Hope this helps.
Related
I am still a newbie at Ruby on Rails. This framework has been really amazing for me. However, since I uploaded it into the production, I still do not understand why Ruby on Rails 5.2.3 on some random occasion does not load JavaScript properly. Sometimes it loads properly at the first try on opening the page, but when it does not, user has to refresh even sometimes several times until it is loaded properly. Also I get error from the browser where it says
GET .../assets/jquery-ui-1.8.16.custom.css net::ERR_ABORTED 500
when I did not in any way import or even writes a single line of code to import that file since I used the JQuery UI 1.12.1 loaded from CDN.
What is really important is, why Ruby on Rails 5.2.3 on some random
occasions does not load the JavaScript properly?
Not only does it happen on production mode, also on the development mode this problem occurs on random ocassions as well.
I will post the application.js and application.scss and also the head part of the application.html.erb to give the insights of what I am doing wrong in this case:
application.js
//= require jquery3
//= require jquery-ui/core
//= require jquery-ui/widgets/slider
//= require rails-ujs
//= require popper
//= require cocoon
//= require social-share-button
//= require social-share-button/wechat
//= require rippleria/js/jquery.rippleria.min
//= require_tree .
application.scss
/*
*= require gmaps-auto-complete
*= require social-share-button
*= require jquery-ui/core
*= require jquery-ui/slider
*/
#import "pretty-checkbox/dist/pretty-checkbox";
#import "rippleria/css/jquery.rippleria";
application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag 'sub/style' %>
<%= stylesheet_link_tag 'sub/components.min' %>
<%= stylesheet_link_tag 'sub/custom' %>
<%= stylesheet_link_tag 'sub/chat.min' %>
<%= javascript_include_tag 'application', async: Rails.env.production? %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
I would hugely appreciate it if you guys could let me know what solutions I can do in order to avoid such random behaviors? Thank you very much for your time. :)
Never mind, I already solved the problem. The main issue that Ruby on Rails had is that if we use the JQuery provided by Rails 5.2.3 by the dependency written below
gem 'jquery-rails'
it will generate the application CSS file with the following line
#import 'jquery-ui.1.8.6.custom.css'
that involuntarily imports JQuery UI Custom CSS although the assets folder does not have the file written above
SOLUTION:
I would recommend you AGAINST using the JQuery provided by Rails 5.2.3 and change the JQuery using CDN method for best performance. So you can remove the following line on application.js
//= require jquery3
then load order of JQuery before application.js on application.html.erb like the following line:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<%= javascript_include_tag 'application', async: Rails.env.production?, :cache => 'cached/all' %>
Hope my solution could help. :)
In my index.html.erb file I have a form that successfully submits onChange. However, this only works if I use <script> tags placed after my form. Why is the same js in welcome.js not running? Index loads as a /welcome route.
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ace.min
//= require jquery.sortable
//= require chartkick
//= require hammer
//= require_tree .
External js file
# app/assets/javascripts/welcome.js
$('.chart-radio-icon').change(function(){
$('#mega_form').submit();
});
View
# views/welcome/index.html.erb
<%= form_tag mega_chart_path, id: 'mega_form', remote: true do %>
<%= radio_button_tag :metric_type, :followers_count, true, :class => 'chart-radio-icon'%>
<%= label_tag(:followers, 'Followers', :class => 'chart-label chart-label-social') %>
Again, the js works when placed in <script> tags in the view, but not externally.
EDIT:
Since we've determined that your asset files are not being included in development. For a sanity check try this and restart your server:
Rails.application.config.assets.precompile = %w( application.js application.css )
END EDIT
Since you are using a require_tree ., and since the welcome.js file is in app/assets/javascripts, it will be included on all pages in your application. See here.
I think that the problem is that on page load, the event listener is not being assigned to the DOM element. Try wrapping your JS code in:
#app/assets/javascripts/welcome.js
$(document).ready(function(){
....
});
What is the best way to split Javascript assets into scripts that need to load in the header and scripts that need to be in the body?
For instance, right now I have,
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
At the end of my body tag in my main application layout. But I want to include something like,
<%= javascript_include_tag "application_head", "data-turbolinks-track" => true %>
Inside my header tag.
How do I split my application.js into two separate files to accomplish this? Keep in mind that I need to be able to use direction likes require_tree in both files so I can't just include each script individually.
$ mkdir app/assets/javascripts/application
$ mkdir app/assets/javascripts/application_head
copy stuff you want in the head into the application_head directory and the rest into application
app/assets/javascripts/application_head.js:
//= require_self
//= require_tree ./application_head
app/assets/javascripts/application.js:
//= require_self
//= require_tree ./application
in config/application.rb, add
config.assets.precompile << 'application_head.js'
I am working on a Rails 3.2.13 app, and encountering the following problem:
The Javascript files I wrote in the app/assets/javascripts/ directory don't seem to be run.
I have JS code in a file called menu_list.js in the app/assets/javascripts/ directory, but it does not do anything. Whereas when I put the same code on the view page in a tag, it works.
<script>$("#sortable").sortable();</script>
Here's my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery.purr
//= require jquery-ui
//= require best_in_place
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
my menu_list.js file:
$(function() {
$("#sortable").sortable();
});
It does not make sense to me, as I thought //= require_tree . would include all the javascript files in the directory. I tried other javascript files too, but they don't seem to have any effects.
$("#sortable").sortable();
If this truly is all you have in app/assets/javascripts/menu_list.js it will run as soon as the script is loaded, which is not what you want. You want to run the above code at least after the DOM has fully loaded into the page and not before.
$(function() {
$("#sortable").sortable();
});
If the environment you're running in is :development, and you properly have the following in your layout
<%= javascript_include_tag "application" %>
you will see a separate <script> tag for every Javascript file Sprockets is loading. The //= require_tree . will pick up your app/assets/javascripts/menu_list.js file.
I suggest also making sure you don't have any precompiled version of your assets in place by running the following in shell
rake assets:clean
You can also force debug mode (individual <script> tags for each file) by adding a :debug option to the above include tag
<%= javascript_include_tag "application", debug: true %>
Most common cause for this is that the call to javascript_include_tag that is on the default layout, then you create another layout, forget to add the include there and then nothing works in controllers where you use this new layout.
I should probably first mention that I do not have precompiling on.
I have 8 different Js files (7, excluding Application.js) and when I use <%= javascript_include_tag 'application' %> it prints out:
<script src="/assets/admin.js?body=1" type="text/javascript"></script>
<script src="/assets/brand.js?body=1" type="text/javascript"></script>
<script src="/assets/category.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/product.js?body=1" type="text/javascript"></script>
<script src="/assets/setting.js?body=1" type="text/javascript"></script>
<script src="/assets/user.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
Because of this, some of my jQuery (which uses Toggles) do not work because they are being executed multiple times.
How do I get it to simply use application.js?
My Application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .
In addition to removing //= require_tree . as Mike said. Try the following command:
$ rake tmp:clear tmp:create assets:clean
This will clear your temporary files & cached asset files.
Further, if you simply want single application.js instead of 7 .js include script tags. set the following option config/environments/development.rb
# Expands the lines which load the assets
config.assets.debug = false
Hope it helps
//= require_tree . loads everything in the same directory as that manifest (.).
Simply remove that line if you want to include your javascripts manually. If you're including all your javascript on every page, however, leave that line in there and remove your includes.
your problèm is that application.js load all js files in the current directory because of the line "//= require_tree ." and probably you use the same names (of id and class) for your html elements in different pages , so one solution is to continue to use "//= require_tree ." in your application.js and give unique name for each elements in your pages, the other solution is to delete the "// = require_tree ." from your application.js and use this :
<%= javascript_include_tag "application", controller_name %>
here when you generate a new controller, rails will create a javascript file with the name of the controller automatically for you, and when you add "controller_name" option for javascript_include_tag, js file for the current controller we'll be added, finally you place your javascript instructions in these file switch controller and here we go.
i find this method verry good but there are other solutions you can find here some other answers in this subject :
Rails 3.1 asset pipeline: how to load controller-specific scripts?
good luck ;)
I had the same problem. Check if you aren't adding on application.html.erb other js files. because if you have the //= require_tree .On the application.js it adds everything, so if you add it on application.html.erb they will repeat.