I should probably first mention that I do not have precompiling on.
I have 8 different Js files (7, excluding Application.js) and when I use <%= javascript_include_tag 'application' %> it prints out:
<script src="/assets/admin.js?body=1" type="text/javascript"></script>
<script src="/assets/brand.js?body=1" type="text/javascript"></script>
<script src="/assets/category.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/product.js?body=1" type="text/javascript"></script>
<script src="/assets/setting.js?body=1" type="text/javascript"></script>
<script src="/assets/user.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
Because of this, some of my jQuery (which uses Toggles) do not work because they are being executed multiple times.
How do I get it to simply use application.js?
My Application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .
In addition to removing //= require_tree . as Mike said. Try the following command:
$ rake tmp:clear tmp:create assets:clean
This will clear your temporary files & cached asset files.
Further, if you simply want single application.js instead of 7 .js include script tags. set the following option config/environments/development.rb
# Expands the lines which load the assets
config.assets.debug = false
Hope it helps
//= require_tree . loads everything in the same directory as that manifest (.).
Simply remove that line if you want to include your javascripts manually. If you're including all your javascript on every page, however, leave that line in there and remove your includes.
your problèm is that application.js load all js files in the current directory because of the line "//= require_tree ." and probably you use the same names (of id and class) for your html elements in different pages , so one solution is to continue to use "//= require_tree ." in your application.js and give unique name for each elements in your pages, the other solution is to delete the "// = require_tree ." from your application.js and use this :
<%= javascript_include_tag "application", controller_name %>
here when you generate a new controller, rails will create a javascript file with the name of the controller automatically for you, and when you add "controller_name" option for javascript_include_tag, js file for the current controller we'll be added, finally you place your javascript instructions in these file switch controller and here we go.
i find this method verry good but there are other solutions you can find here some other answers in this subject :
Rails 3.1 asset pipeline: how to load controller-specific scripts?
good luck ;)
I had the same problem. Check if you aren't adding on application.html.erb other js files. because if you have the //= require_tree .On the application.js it adds everything, so if you add it on application.html.erb they will repeat.
Related
I'm trying to implement an infinite scroll and using jquery.pageless
But I'm getting this error: undefined method 'pageless'
I include jquery.pageless.js on my application.html.erb in assets:
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.pageless' -%>
Any suggestion about how to solve this?
I don't know why you are using the format:
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.pageless' -%>
in application.rb.
In assets/javascript/application.js, add those files:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jqeury.pageless
//= require jquery_ujs
//= require_tree .
You need to make sure you have jquery installed:
gem install jquery-rails
then:
bundle install
Also make sure you have the jquery-pageless.js files in on of the paths mentioned in the application.js file so it gets picked up by the asset pipeline.
Application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery.pageless
//= require jquery_ujs
//= require turbolinks
//= require_tree .
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.
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've tested my Rails app's functionality by placing jQuery at the bottom of my home.html.erb file with simple script tags. Everything works fine until I attempt to utilize the Asset Pipleine in Rails 3.1 and place the script within app/javascripts/home.js.erb
Anyone know why I can't get the javascript to work outside of the home.html.erb file
you could add the script tag in the application.html.erb and you'll have jquery in all your pages.
you can add the script in this way: (you should add the jquery-1.7.min file in the folder app/javascript)
<%= javascript_include_tag 'jquery-1.7.min'%>
Don't put home.js.erb in app/javascripts but extract your jquery from home.js.erb and put in app/assets/javascripts/home.js
add config.assets.precompile += %w( *.js ) to config/environments/production.rb or in config/application.rb for global env (test/dev/prod)
than in app/assets/javascripts/application.js have
//= require jquery
//= require jquery_ujs
//= require_self
//= require_tree .
call it with javascript_include_tag "application" from the view
... and finally, don't forget to add gem 'jquery-rails' to your Gemfile and run bundle
As far as what I was looking to do, which was separate javascript files for different views, I was unsuccessful. I tried different naming conventions, etc.
What has worked for me however, is putting all of my javascript within application.js. Doing this makes this code accessible by every view throughout the entire application. Depending upon your needs and your app, you may want to put the script within [your-model-name].js.coffee which will make it accessible (I think just for your particular controllers and views). Since my app is a single model/controller setup, this is essentially the same thing.
Then, it's a matter of using selectors carefully as to not interfere with other pages unintentionally. In other words, if you want a piece of code to run within one particular view and not another, you will have to adjust your .js code accordingly, since everything within application.js is accessible to all views.
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)