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.
Related
Issue: I noticed my chartkick charts were not appearing and stuck on "loading..." within production.
I debugged and realized the reason is because i recently created a bunch of .js files under javascripts to cut down on <script></script> code within my views and instead using <%= javascript_include_tag "word" %>.
What the problem is, and the difference btween the charts showing and not showing is in my initializers/assets.rb folder is:
Rails.application.config.assets.precompile << '*.js'
Without this, it works, but also without it, i cannot load my independent JS files.
How can I load my JS files, under assets/javascripts/file_name.js and also have my charts working?
Is there a better way to call my JS files, without needing to use script tags?
Application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require popper
//= require bootstrap-sprockets
//= require jquery3 #i have this here and not over popper because if it isn't in this position, most of my javascript/jquery features under bootstrap do not work - i haven't figured this out yet. I will most likely use pure jquery/JS and remove all bootstrap JS if I cannot find this reason
//= require Chart.bundle
//= require chartkick
//= require_tree .
Just deployed a Rails 5.x application and installed a theme. The theme's contents are located within the app/assets/javascripts/theme-js and app/assets/stylesheets/theme-files folders.
Inside of the app/assets/javascripts/application.js file includes the following:
//= require jquery
//= require jquery_ujs
//= require_tree .
// Required for the SmartAdmin theme
//= require theme-js/app.config.js.erb
//= require theme-js/app.js
And inside of the app/assets/javascripts/theme-js folder are have the following files (included with the theme):
app.config.js.erb
app.js
application.js
The problem that I'm having is that inside of the application.js file contains a line that states: //= require app.config, but Rails generates me an error stating the following:
couldn't find file 'app.config' with type 'application/javascript'
Even though app.config.js.erb is in the same folder as application.js. Is there any reason why this would happen? Can't figure out why this won't work. I've even tried //= require app.config.js and //= require app.config.js.erb and neither one of them work.
I noticed that //= require ./app.config appears to work whereas //= require app,config doesn't. Something new with Rails 5.x perhaps? I'd have to modify all of the require statements to fit this unless I'm missing something.
Problem solved. Just needed to add the custom theme-js and theme-css folder to the assets pipeline so that Rails can search those folders for the appropriate files when using //= require <file>. Assuming this is what I needed to do, although I'm not sure if it's best practice.
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(){
....
});
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.
I am using Ruby on Rails 3.1.1 and the jquery-rails 1.0.16 gem. I have an issue on using a form with :remote => true.
In my view file I have:
<%= form_for(#user, :url => user_path(#user), :remote => true) do |f| %>
...
<%= f.submit "Update" %>
<% end %>
When I click on the Update button and I inspect the Firebug Console, I see that two AJAX HTTP requests are performed instead of one as well as it should be. The same problem happens for all forms in my application that are using :remote => true.
What could be the problem? How to fix it?
Note: If I inspect the DOM it seems that in the current page I do not have duplicate of HTML\CSS id values.
P.S. I: I tried to use different browsers and clear them cache but the problem still occurs.
P.S. II: The problem occurs in development mode in localhost (on my local machine). I have not tried yet if it happens in production mode on the remote machine.
UPDATE I
In my application.js file I had
//= require jquery
//= require jquery_ujs
//= require jquery-ui
I tried to remove the require jquery_ujs line and now it seems to work until I run the bundle exec rake assets:precompile command and restart the server. Exactly: if I remove the require jquery_ujs line and I do not run the bundle command it works as well as expected; but if then I run the bundle command the AJAX form submission doesn't work "at all"\"anymore".
Maybe the problem is related to the bundle command that generates fingerprinted files... could be that?
UPDATE II
My filesystem related to JavaScript files is:
app/assets/javascripts/
app/assets/javascripts/application.js
lib/assets/javascripts/
vendor/assets/javascripts/
vendor/assets/javascripts/vendor.js
vendor/assets/javascripts/jquery_plugins/plugin1.js
vendor/assets/javascripts/jquery_plugins/plugin2.js
vendor/assets/javascripts/jquery_plugins/....js
In my app/assets/javascripts/application.js file I have:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//
//= require_tree .
//
//= require vendor
In my vendor/assets/javascripts/vendor.js file I have:
//= require_directory ./jquery_plugins
If I run the following command
$ bundle exec rake assets:precompile
/<MY_USER_PATH>/.rvm/rubies/ruby-1.9.2-p290/bin/ruby /<MY_USER_PATH>/.rvm/gems/ruby-1.9.2-p290/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
/<MY_USER_PATH>/.rvm/rubies/ruby-1.9.2-p290/bin/ruby /U<MY_USER_PATH>/.rvm/gems/ruby-1.9.2-p290/bin/rake assets:precompile:nondigest RAILS_ENV=production RAILS_GROUPS=assets
in the public/assets/ directory it creates those files
application-b63d5946eebe0c8d46e078ef32299fc5.js
application-b63d5946eebe0c8d46e078ef32299fc5.js.gz
application.js
application.js.gz
manifest.yml
...
If I inspect the page HTML code, I can see the following:
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_plugins/plugin1.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_plugins/plugin2.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_plugins/....js?body=1" type="text/javascript"></script>
<script src="/assets/vendor.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
Prior to Rails 3.1, you would include jQuery-ujs by manually adding rails.js to your public/javascripts folder.
With Rails 3.1, you now have a gem 'jquery-rails' line in your Gemfile and a require jquery_ujs line in your app/assets/javascripts/application.js file; there is no need for manually adding the rails.js file because it's already bundled with the gem.
If you upgraded a non-3.1 app to 3.1, you may still have rails.js sitting around, so the UJS stuff is getting run twice. Rather than removing the require line from your application.js file, you should probably just delete the rails.js file instead. (You also may still have the actual jQuery JS file sitting in there too; same thing, it's included automatically by the jquery-rails gem and you can delete it).
UPDATE
I just realized you're precompiling your assets. You don't want to do this in development mode, as when you request /assets/application.js it's probably serving up /public/assets/application.js which includes all the other JS files inside of it. To fix, clear out the public/assets folder and only precompile your assets in production. (See Rails 3.1 remote requests submitting twice)