I have put the tag javascript into my body application.
In my console I am getting this error:
Rails-ujs has already been loaded.
In development mode the app works, however it doesn't work in production.
I have deployed my rails application on Heroku.
I try to move the tag javascript into the head, but then all function js is not working.
Any solution?
If you're using webpack and a separate front-end, you might have two instances of your javascript tag in application.html.
= javascript_include_tag 'application', 'data-turbolinks-eval' => false
= javascript_pack_tag 'application'
You'll want to remove the first instance; similarly if you've used pack_tag to render your stylesheets, you may be experiencing CSS classes being called twice (you'll see stacked classes on an element in dev tools).
I solved bringing my javascript into the head and simply including all my functions below:
$ (document).on('turbolinks: load', function () {
})
If you do not use webpack then use as like:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', 'data-turbolinks-eval': false %>
<%= javascript_include_tag 'frontend_application', 'data-turbolinks-track': 'reload' %>
</body>
in application.js file
//= require rails-ujs
//= require activestorage
//= require turbolinks
in frontend_application.js file
//= require compress.min
//= require custom
Related
I'm new to rails and I am trying to get a website up using start bootstrap, specifically the landing page found here. I have imported the css and html into my rails project, but I am having a hard time with the javascript. The script file is in app/my_app/javascript/packs. They stylings go in app/assets/stylesheets and I can successfully reference the images contained in them using <img src> assets/stylesheets/...</img src>. I boot up the server with rails s and it loads up in my browser with the relevant style and images albeit without any javascript. The specific error in the console reads
localhost/:468 GET http://localhost:3000/packs/scripts.js 404 (Not Found)
I reference the script at the very bottom of my index.html.erb page like so
<script src> packs/scripts.js </script>. I have also tried javascript/packs/scripts.js
My applications.html.erb looks like this
<html>
<head>
<title>TestApp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
The <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> tag only appears once and in only that file.
My applications.js file is this
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require scripts
//= require jquery_ujs
//= require turbolinks
//= require_tree
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("packs/scripts")
So rails/webpacker can't seem to find the script under the javascript/... path, and I don't know why. I have scoured and tried alot of solutions but all to no avail. Any help or suggestions on the issue would be supremely appreciated. Thank you
If you have a script.js from Webpacker that you want to load in Rails, you can load it using <%= javascript_pack_tag 'scripts', 'data-turbolinks-track': 'reload' %>.
javascript_pack_tag is a helper method that will automatically generate script tag and url for you.
Additionally, because you're using turbolinks and have added 'data-turbolinks-track': 'reload', you can place the javascript_pack_tag in your <head>.
currently I am working on Rails 6, and I met
"cannot load such file -- coffee_script"
I took a look in Gemfile and there is no gem 'coffee-rails'
and I have tried $ rails tmp:cache:clear to clear cache and restart server.
but I still get the same error.
!!!
%html
%head
%meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
%title Myapp
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application'
%body
= render 'layouts/notifications'
= yield
enter code here
application.js
//= require jquery
//= require rails-ujs
//= require_tree .
enter image description here
To be able to answer your question better, you should probably also post your application.js file – because this is the thing that triggers the error.
Generally, two things:
Rails doesn't really encourage using CoffeeScript anymore. That doesn't mean that you can't use it – just that it has fallen out of favor and people tend to use other facilities these days (eg. Babel).
In order to make CoffeeScript work in Rails, you need to have the coffee-rails gem in your Gemfile. If it's not there, you need to add it and then it should usually work out-of-the-box.
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. :)
I am facing a javascript issue on Rails;
I used this web app in order to publish a book rating system
I've noticed that when I go to my homepage (index), then I click on the book that I want to rate (, the script loads and everything works fine, but when I go directly to the book without passing by the home page, the script of rating will not load
on application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
on the head of application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
What am I missing ?
It may be caused by turbolinks which uses AJAX to view templates to speed things up. But it will cause JavaScripts to not load without a page refresh. You can try removing the turbolinks gem from your gemfile and run bundle install. Alternatively you can wrap the raty javascript with the following. So put the first line at the beginning of your javascript and close your javascript with the last line.
$(document).on('turbolinks:load', function() {
...your jQuery/javascript goes here...
});
I have a rails application and the application.js after asset compilation takes more than 1 MB. This is slowing down my entire site.
I use Apache, Rails 4, jQuery, quite heavy JavaScript and AJAX. I would be very grateful if someone could point me in the right direction.
This may not be feasible in your particular case, but has certainly helped me keep Application.js from bloating.
As I'm sure you know, Application.js compiles all specified files (by default, all of them) into a single .js file, which is loaded (again, by default) as part of your layout in every page. Often times this results in the inclusion of entirely unnecessary custom scripts loading in every page, and slowing down the entire application. I personally find this behavior undesirable. What I find works for my sites is only including my "core" javascript components in Application.js (jquery, bootstrap's js libraries, and any scripts that pertain to layout.html.erb itself), and specifying the rest in the pages that need them. For example:
application.js
Note that it does NOT include require tree .. This is important, as that is the line which specifies the inclusion of the entire assets/javascripts folder. "Template" in this case is the .js file a defined which pertains to layout.html.erb
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require template
//= require turbolinks
layout.html.erb
The following is the very end of my layout, immediately before the closing body tag. This loads application.js on every page, and after that loads any js specified in the view.
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<% if content_for?(:javascript) %>
<%= yield :javascript%>
<% end %>
The View(s)
In any view that requires page-specific javascript, you may specify the files with a Rails javascript helper
<% content_for :javascript do %>
<%= javascript_include_tag 'pages/profile', 'data-turbolinks-track' => true %>
<% end %>
initializers/assets.rb
Finally, make sure that your scripts are still being precompiled, even though they aren't a part of Application.js.
Rails.application.config.assets.precompile += %w( pages/profile.js )
...or, more efficiently assuming you have many pages with their own scripts...
Rails.application.config.assets.precompile += %w( pages/* )
In Conclusion
I find this technique really helps keep the size of Application.js down, and makes for good practice in general. I hope you find it useful, and apologize if it is extraneous to your problem.
Have you ever thought about using the CDN hosted jQuery Version? Could you provide your uncompiled application.js.
You could also try to use browserify or require.js