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.
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 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 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 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" %>
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.