I have a basic Rails application. I couldn't get some javascript to fire off so I added an alert to my application.js file just to see if the js is working at all. Here is the code:
//= require jquery
//= require jquery_ujs
//= require_tree .
alert("hello");
Here is the code in my application.html.ert:
<!DOCTYPE html>
<html>
<head>
<title>KidsCash</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
This code is not getting fired off. What do I have to do to enable js in a Rails application. Am I missing a setting or something else. Any help will be greatly appreciated.
* Maybe this will be of help. This is the first project that I have created without using rails new project. I created a .rvmrc file, and then ran rvm --create ruby-2.0.0-p0#gemset. I then created the project with rails new .. I don't know if this will make a difference.
* If I create a project with rails new <project-name> then everything works fine. If I created it this other way, then I don't get access to the javascript from the browser. Any other ideas?
You should create a different file to put your code in, and not use application.js since it's being generated and re-written. Any other file in the same directory will be automatically included in your compiled application.js and should function properly. In sum: create a new .js file in the same dir.
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. :)
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
I am using :
Linux Ubuntu 16.04
ruby 2.4.0p0;
rails 5.1.1
I am a begginner in rails and I have followed the Ruby on Rails 4 Essential Training in lynda.com in order to learn. I am now stuck at the loading js assets task.
I have created the "app/assets/javascripts/demo.js" file which contains the js function :
function jsRoar(name) {
alert('I am ' + name + '. Hear me roar!');
}
Then I have load this file in my manifest file "app/assets/javascripts/public.js"
//= require jquery
//= require jquery_ujs
//= require demo
After that I have added external include of js to my layout at "app/views/layouts/application.html.erb":
<%= javascript_include_tag "public" %>
In my controller I have included my layout by typing at "app/controllers/demo_controller.rb"
layout 'application'
And finally I have called my function by typing these js codes in my demo/index.html.erb :
<%= link_to('Roar', '#', :onclick => "jsRoar('Yassser');return true;") %>
<%= javascript_tag("jsRoar('Rails');")%>
After that i get "undefined function" in my chrome console and the alert doesn't appears .I have defined the function in the same html.erb and it works so it's not a problem of javascript i think.
I must mention also that, at first when i run my server, i have obtained a problem of assets compilation so I have fixed by adding this line in "config/initializers/assets.rb":
Rails.application.config.assets.precompile += %w( public.js)
I am available for more details.
Please help.
My problem was resolved after deleting the "demo.coffee" file.
I discovered that the my issue is derived from the fact that I have two files with the same name (but different extensions) "demo.js" and "demo.coffee". Since the Rails asset helpers treat coffescript and js files equally this is ambiguous.
So I have deleted the "demo.coffee" and all my problems are settled.
Thank you all mates.
Great thnx for #max with his reply in this post
I think this:
<%= javascript_tag("jsRoar('Rails');")%>
should be:
<%= javascript_include_tag("demo") %>
See if this code works in your view:
$(document).ready(function(){
jsRoar('Yassser');
})
I'm trying to recreate this demo in my own Rails project:
http://ihatetomatoes.net/demos/parallax-scroll-effect/
Files are here: http://ihatetomatoes.net/demos/parallax-scroll-effect-1302.zip
But it only shows the last slide and not scrollable. I suspect there's something wrong with loading the js files in Rails but I'm not entirely sure.
Here is my repo: https://github.com/tihuan/parallaxtest. You can clone it and run rails s to see that it's broken.
*Note that you can remove requiring js files from Welcome#index.html.erb since I already added them in application.js!
** Current application.js loading order:
//= require js/vendor/jquery-1.9.1.min
//= require js/vendor/modernizr-2.7.1.min
//= require js/skrollr
//= require js/imagesloaded
//= require js/_main
//= require_tree .
Please help!
It might be thaat your not loading the scripts in the right way, check modernizr config and how you need to load it into the app
<html>
<head>
<title>Your Awesome App</title>
<%= stylesheet_link_tag :application, media: :all %>
<%= javascript_include_tag :modernizr %>
<%= csrf_meta_tags %>
</head>
<body>
...
<%= javascript_include_tag :application %>
</body>
</html>`
I have seen many answers to similar posts on Stackoverflow and I tried implementing it but it is not working. I have done the following things
1) Removed //= require_tree . from assets/javascripts/application.js
2) Added //= require users in the assets/javascripts/application.js (where users.js is my javascript file in the same folder as the application.js resides)
In my new.html.erb I have included the following line
<%= javascript_include_tag "users" %>
3) users.js contains simple javascript code like "alert(6)"
When I make request to users/new thru localhost I do not get any alert although I can see my users.js included in the html but there is no code in that.
Can anyone please help me on this??
Since you have included users.js inside application.js, you should add application.js to the page
In new.html.erb, replace users with application
Remove this line
<%= javascript_include_tag "users" %>
And add this line
<%= javascript_include_tag "application" %>