I have a table in a partial in my rails app, and I want to use DataTables to make it look nice. I am using the jquery-datatables-rails gem.
My partial:
<script type="text/javascript">
$(document).ready(function() {
$('#businesses').dataTable();
} );
</script>
<table id="businesses">
<thead>
<tr>
Bunch of headers here...
</tr>
</thead>
<tbody>
<tr>
Lots and lots of code here...
</tr>
</tbody>
</table>
application.js:
// 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 dataTables/jquery.dataTables
//= require_tree .
application.css :
*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require dataTables/jquery.dataTables
*= require_tree .
*/
The DataTables files are referenced properly in application.js and in application.css as well.
Thanks!
You should move your js code to inside your application.js file.
So, no script tags inside your html.erb, to do the javascript part you should have an application.js like that:
// 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 dataTables/jquery.dataTables
//= require_tree .
$('#businesses').dataTable();
} );
Related
I have a weird confusion, when I use application.js in rails like that:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require underscore
//= require gmaps/google
and use application.css.scss like that:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
I think // is a comment in JS file and /* */ is also a comment in CSS file, I didn't think too much and just use before, but for now I wanna know why all comments in JS and CSS file have no effects in rails?
Yes, both // and /* */ are comments for js and css files respectively, but //= and *= are directives used by sprockets, from the docs:
The DirectiveProcessor is responsible for parsing and evaluating
directive comments in a source file.
A directive comment starts with a comment prefix, followed by an “=”,
then the directive name, then any arguments.
// JavaScript
//= require "foo"
# CoffeeScript
#= require "bar"
/* CSS
*= require "baz"
*/
So js or .css files will treat //= and *= as comments, but sprockets will read those directives to load the required files into the rails asset pipeline.
Check also the sprockets guides for more detailed information.
in my ror application i've a jquery error during the execution. On the Google Chrome Application appear this message
Uncaught ReferenceError: jQuery is not defined
this is my application.js:
// 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_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){
$(document).foundation('alert');
});
In the gemfile is present the jquery-rails gem.
I really don't know where crush my head. All the help is appreciated
remove Gemfile.lock
do
$bundle install
now check if jQuery works
when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
Application.js
// 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_ujs
//= require turbolinks
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .
From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)
I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY
Did you bundle install and make sure you are loading application.js (from the assets pipeline).
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 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.