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.
Related
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 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
I'm deploying a website with Heroku, though really struggling to get the jQuery firing when it goes live. Locally, all works fine.
I've had a play and haven't found any solution - it's all loading in the asset pipeline, shows as a source on the live page (albeit without working) and I've tried all of the solutions I've found on the web.
I've performed rake assets:precompile, have config.assets.compile = true and, thinking it might be a problem due to Turbolinks, installed the jquery-turbolinks gem.
With every change I thought I'd have this running, though nothing has affected the site's behaviour yet. Here's some code:
Gemfile
...
gem 'bootstrap-will_paginate'
gem 'bootstrap-sass'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
...
Application.js
...
//= require bootstrap
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require_tree .
...
Application.html.erb
<head>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Home.js
var validBox = function(x, y){
...
});
};
var main = function(){
$('.toggle').click(function(){
$('.about-me').toggle();
});
//Carosel
$('.arrow-next').click(function(){
...
});
$('.arrow-prev').click(function(){
...
});
//Comments
$('.btn').click(function() {
...
});
$('.status-box').keyup(validBox('.status-box', '.name-box'));
$('.name-box').keyup(validBox('.name-box', '.status-box'));
$('.btn').addClass('disabled');
}
$(document).ready(main);
Could it be a problem with the $(document).ready(main); line? I've a feeling I've read somewhere jQuery doesn't always respond as the page isn't loading from scratch / 'ready' when using Turbolinks, though thought the addition of the relevant Gem would resolve this. I've also tried $(document).on('ready', 'page:change')(main); to run the function at other points, but to no avail.
Alternatively, I seem to remember there being some command line functions to better ensure the assets run when live though can't find anything relevant.
Any help would be GREATLY appreciated as I'm stumped with this one. I'm pretty new to this, so apologies if there are any glaring, amateur errors in amongst this (though that might mean a simple solution!).
Thanks in advance, Steve.
In my case, I found the answer here:
Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery
The Java console was throwing up the error mentioned there, and after lord knows how much hunting, simply changing the order the js files were loaded made the difference.
Bootstrap after jQuery, everything works perfectly!!
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
I am working on a rails 4.0.1 application.
I have a a set of interactive slides, intended to teach personal finance. I have a list of question and buttons that when clicked show a jQuery Modal popup window.
My javascript files aren't loading after I perform a <%= link_to %> the next slide with Safari and Mozilla. There is no issues with Chrome.
If I reload the page, the modal does magically start working again. Here is the files that I believe are related. Any help is greatly appreciated.
application.html.erb
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
routes.rb
match '/slide1', to: 'interest_rates#slide1', via: 'get'
match '/slide2', to: 'interest_rates#slide2', via: 'get'
match '/slide3', to: 'interest_rates#slide3', via: 'get'
match '/slide4', to: 'interest_rates#slide4', via: 'get'
match '/slide5', to: 'interest_rates#slide5', via: 'get'
match '/slide6', to: 'interest_rates#slide6', via: 'get'
application.js
//= require turbolinks
//= require jquery
//= require d3.v3
//= require d3.layout
//= require rickshaw
//= require custom
//= require graph
slide1.html.erb
<%= link_to "Next", {:controller => :interest_rates, :action => :slide2}, class: "button" %>
If you haven't already, maybe check out the jquery-turbolinks gem and therubyracer gem. I've had issues where javascript wasn't loading properly, and after using the jquery-turbolinks gem, everything worked.
In my gemfile:
gem "jquery-turbolinks", "~> 2.0.1"
gem 'therubyracer', :require => 'v8'
I have a problem with Rails and Jquery. Im using AJAX to add comments to articles without reloading them. The following code got automatically included in my views/application.html:
<%= javascript_include_tag "application" %>
<%= javascript_include_tag :all %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
Everything seemed to work fine, until i realised that the server console shows the following error:
ActionController::RoutingError (No route matches [GET] "assets/all.js")
So since this line doesn't seem to add anything to the application other than an error i deleted it. Next time I started the server and used the application all of a sudden every comment gets posted twice!? Otherwise everything still worked fine. So I added the deleted line again and I have no idea why but when I add the line
<%= javascript_include_tag :all %>
again everythings works fine again, only one comment gets posted as intended. However I dont want to keep this in the code since it throws an error. Can someone explain this behaviour and tell me how to fix this?
Rails 3.1 uses sprockets to bundle javascript and css files. This makes the :all option deprecated. Sprockets use 'magical' comments to manage which javascripts are included.
So your application.js should look something like this:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
The first line also includes jQuery itself, so you don't need the other script tags. All you need to to is to point to application.
<%= javascript_include_tag "application" %>
If you're deploying to production, you'll need to run rake assets:precompile.
There is a Railscasts episode on assets, which is a must see.